响应式布局1--媒体查询和-webkit-min-device-pixel-ratio-白红宇

响应式布局1--媒体查询和-webkit-min-device-pixel-ratio

阅读量：4602 次

发布时间：2019-06-09

本文共 4188 字，大约阅读时间需要 13 分钟。

-webkit-min-device-pixel-ratio其实就是这个玩意

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例

公式表示就是：window.devicePixelRatio = 物理像素 / dips

关于媒体查询---例：

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { html, body { font-size: 20px; } }@media (device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) { html, body { font-size: 23.4375px; } }@media (device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) { html, body { font-size: 25.875px; } }

首先 @media only screen and

only(限定某种设备)

and 就是and.....其他还包括 not(排除某种设备)

screen媒体类型

用法：

@media screen{

选择器｛/*样式代码写在这里*/｝

}

--------------------------------------------------------

max-width 是媒体特性中常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

如：

@media screen and (max-width:480px){ .ads {   display:none;  }}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏

min-width最小宽度

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){.wrapper{width: 980px;}}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

多个媒体特性使用

多个关键词用“end”连接

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){  body {background-color:#f5f5f5;}}

设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

Responsive设计——不同设备的分辨率设置 例：

1.1024px显屏

@media screen and (max-width : 1024px) {                    /* 样式写在这里 */          }

2.800px显屏

@media screen and (max-width : 800px) {              /* 样式写在这里 */          }

3.640px显屏

@media screen and (max-width : 640px) {              /* 样式写在这*/            }

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              /* 样式写在这 */            }

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         /* 样式写在这 */            }  portrait：指定输出设备中的页面可见区域高度大于或等于宽度。landscape：除portrait值情况外，都是landscape

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              /* 样式写在这 */            }

----------------------------------------------------------------------------------- 再回到device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度： @media only screen and (device-aspect-ratio:4/3) 常见参数，转