媒体查询的尺寸大总结（css3 iphone5的媒体查询怎么写）

可以用谷歌浏览器里面有iPhone5的尺寸，然后用媒体查询它的宽度就行了媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多）。需要提醒一下的是CSS的优先级概念，在样式表中越后的样式优先级越高，就是后面的样式会覆盖前面的样式。在这个例子中，我们先设定了默认颜色为灰色。如果width大于960px的，会显示灰色。假设width为750px，会先匹配到灰色，再匹配红色，最终显示了橙色。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式。

@media媒体查询：针对不同的屏幕尺寸设置不同的样式

@media mediatype and(not/only) (media feature){ }

mediatype（媒体类型）:     all--所有设备，     print--打印机和打印预览，     screen--电脑屏幕和平板电脑和只能手机等

and / not / only：     and多个媒体特征链接到一起且的意思，     not排除某个媒体，     only指定某个特定的谋体类型

media feature：     width--设备的页面可见宽度，     min-width--最小可见宽度，     max-width--最大设备可见宽度

当屏幕宽度小于等于439px的时候, body的背景颜色是橙色： @media screen and (max-width: 439px){ body{ background: orange;} }

当屏幕宽度大于等于440，小于等于 599区间内,body颜色黑色: @media screen and (min-width: 440px) and (max-width:599){ body{background:black;} } @media screen and (min-width: 440px) { body{background:black;} } 《-简写

当屏幕宽度大于等于600px,改为白色: (大于600会覆盖大于599) @media screen and (min-width: 600px){ body{background:black;} }

使用媒体查询根据屏幕尺寸 调用不同的css文件(很少用) 《link rel=“stylesheet“ href=“style320.css“ media=“screen and (min-wdith: 320px)“》 《link rel=“stylesheet“ href=“style640.css“ media=“screen and (min-wdith: 640px)“》

之前把这种一屏一屏滚动的页面，叫过锁屏，叫过滑动，就是没有找到一个标准的叫法。后来查了一些资料，也确实没有标准的定义。只是有个插件叫fullPage，比较符合，然后中文就是全屏滚动了。也讨教了另一个前端同伴，他也说就叫fullPage吧。然后就这么愉快的决定给它叫做全屏滚动了！

如今，经常能看见这种网站，这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次！感觉开始的时候pc较多，后来发展到移动端。简单的说，全屏滚动就是整个页面从上到下由多个部分组成，每个部分都正好占满一个屏幕。用户可以滚动鼠标滚轮（移动端为滑动），每次滚动（滑动）都会从一个部分滚动到另一个部分。因为要设置每个部分的内容都是占满一个屏幕的，所以一般都是添加一些简单的内容。移动端更是必须的，移动端的设备杂乱，屏幕大小尺寸不同，分辨率不同，那么要想在每个设备上都呈现完美的状态，简直是不可能的。

我们正在做的全屏滚动页面呈现的内容就是比较多的，是按照iphone6的尺寸做的。由于布局样式用了rem和flexible适配，内容会随着屏幕而放大或者缩小。在iphone5上效果还是可以的，而iphone4就完全不行，有一部分内容被遮掉了。经过媒体查询iphone4手机也可以了。而面临着更严峻的问题是还有好多五花八门的尺寸。 安卓和ios常用尺寸 ，接下来选取了这个链接给提供的安卓和ios常用的前五种尺寸做适配。这样除了iphone4、5、6之外还要调试十种尺寸，感觉真是路漫漫其修远兮。然后就有了一个这样的思考，这十种尺寸的比例是不是一样呢，如果比例一样，是不是可以按比例进行媒体查询呢，如果可以就不用调试十种了。

十种尺寸里面有七种尺寸的比例都是1:1.7多的，最后找到了按比例查询的css即显示区域宽高比（aspect-ratio）此值只支持正整数，因此下面我把1:1.7各乘以10写为10:17。也是支持min和max的。另外还有设备宽高比（device-aspect-ratio）。

全屏滚动页面的适配问题还需要根据页面的需求情况去做相应的适配，并没有说写上一行样式，所有适配就都解决了的方法。感觉说的和废话一样呢？主要是想介绍按比例的媒体查询样式的，其他还有好多以前没用到过的查询方法可以参考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

我正在使用 62.5% 技巧在不同的屏幕尺寸上设置我的字体大小。这些字母在大屏幕上看起来太小了，所以我想使用最小宽度媒体查询将其增加到 80% 的字体大小，但由于某种原因，这根本不起作用。难道我做错了什么？ 我正在使用 sass，此文件位于 _themes.scss 文件中：当我查看检查器时，媒体查询被划掉并显示“未知属性名称”*,*::before,*::after { color:rgb(255 211 0)“》margin: 0; color:rgb(253 97 106)“》padding: 0; color:rgb(98 189 255)“》box-sizing: border-box;}html { color:rgb(98 189 255)“》font-size: color:rgb(144 255 173)“》62.5%; @media screen and (color:rgb(98 189 255)“》min-width: 1600px) { color:rgb(98 189 255)“》font-size: 80%; }}html,body { color:rgb(98 189 255)“》overflow-x: hidden;}body { color:rgb(98 189 255)“》font-family: ’Poppins’, Avenir, Helvetica, Arial, sans-serif; color: color:rgb(73 238 255)“》hsl(0, 0%, 100%); text-align: center; color:rgb(98 189 255)“》font-size: 1.6rem; min-height: 100vh;}

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

荣耀7手机采用5.2英寸屏幕。

支持OTG 的， 你可以去淘宝买个OTG 数据线 然后用鼠标代替手指炒作 然后下载360手机助手就可以 拷贝到电脑了。或者下载华为助手

1、css3媒体查询就是为了适应各种设备，查询媒介设备，来添加不同的样式，不会在行内使用；2、从web标准的设计来讲，主张css样式和html结构分离，建议使用外部文件或内联样式。