CSS3——多媒体查询属性

傷城~ 2022-05-10 00:40 200阅读 0赞

## 多媒体查询语法     ##

**@media not|only mediatype and (expressions) \{**

**CSS-Code;**

**\}**

*  **not:** not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
 *  **only:** 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
 *  **all:** 所有设备，这个应该经常看到

## CSS3 多媒体类型 ##

<table> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td>用于所有多媒体类型设备</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>用于打印机</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>用于电脑屏幕，平板，智能手机等。</td> 
  </tr> 
  <tr> 
   <td>speech</td> 
   <td>用于屏幕阅读器</td> 
  </tr> 
 </tbody> 
</table>

Viewport视口：

布局视口：一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

可视视口：

visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素：

*  iPhone5 ：640 \* 1136
 *  iPhone6：750 \* 1334
 *  iPhone6 Plus：1242 \* 220

理想视口：

ideal viewport（理想视口）通常是我们说的屏幕分辨率。

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 \* 1800。当你设置屏幕分辨率为 1920 \* 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素， 那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度\*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：

1.  iPhone5 ：分辨率 320 \* 568，物理像素 640 \* 1136，@2x
2.  iPhone6：分辨率 375 \* 667，物理像素 750 \* 1334，@2x
3.  iPhone6 Plus ：分辨率 414 \*  736，物理像素1242 \* 2208，@3

### CSS像素 ###

CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）