@media的使用

Posted 2020-08-17 U0U悠悠U0U

1.@media规则

1.1媒体类型：

  all:匹配所有设备；

  handle:匹配手持设备(小屏幕、单色、带宽有限)；

  print:匹配分页媒体或打印预览模式下的屏幕；

  screen:匹配彩色计算机屏幕；

  其他媒体类型还有braille(盲文点字触觉反馈设备)、embossed(盲文分页打印机)、projection(投影仪)、speech(语音合成器)、tty(电话机屏幕等固定宽度字符栅格设备)和tv(电视机)。

  详细了解CSS2.1标准

1.2常用媒体特性：

  min-device-width和max-device-width:匹配设备屏幕的尺寸；

  min-width和max-width:匹配视口的宽度，如浏览器宽度；

  orientation(值为portrait和landscape):匹配设备是横屏还是竖屏。

1.3逻辑运算：and、not、or

1.4关键字：all 、 only 

 

2.<link>标签的media属性

可以通过link标签中的media属性，有选择的加载样式表。

<link type="text/css" media="print" href="css/print_style.css" />
<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_style.css" />

3.断点

@media screen and  (max-width:640px){ /*CSS规则*/}

个人认为不要针对某一款设备，来设置样式，而是要在发现样式不合适时设置。

Andriod、IOS和Windows设备媒体查询

media扫盲文

 

4.走进devicePixelRatio：

devicePixelRatio指window.devicePicelRatio。

devicePixelRatio = 物理像素 / 设备独立像素。

非视网膜屏幕设备，window.devicePixelRatio=1。

实际测试

4.1.浏览器

我电脑上的chrome浏览器（版本 51.0.2704.106 m），弹出1：

FF浏览器（48.0.2）：

4.2.IOS

无视网膜设备为1，视网膜设备为2。

4.3.Android没有固定值

 

总结：

IOS设备：screen.width * devicePixelRatio = 物理像素。

Andriod：screen.width / devicePicelRatio = 设备独立像素。