复习响应式

视口标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width=device-width          声明实际宽度为设备的宽度 

initial-scale=1.0                初始化的缩放大小，1.0不进行任何的缩放 

minimum-scale=1.0          允许用户缩放的倍数，1.0不允许缩小 

maximum-scale=1.0         允许用户放大的倍数，1.0 不允许放大 

user-scalable=no              是否允许用户缩放，no不允许用户缩放

手机厂商在出厂的时候，设置的默认宽度为980，厂商定的视口被称为布局视口；

这宽度不能作为网页设计中的实际宽度，需要根据设备的设计宽度来进行相应的操作；

视口宽度，这个宽度才是我们所需要的实际宽度；通过这个视口宽度引申出了一个标签 ，叫做视口标签，

它所得出结果才是设备的实际宽度；当前一切手机端的效果都需要用到视口标签；

 

分辨率与像素比

在PC端页面 1CSS像素 = 1物理像素，是1：1对应的。

但移动设备分辨率甚至比pc端更高，可以显示的物理像素更多，如果和pc端一样，1个css的px和物理像素对应，可以想象显示的内容有多小。

为解决这个问题，声明视口标签，那在移动设备上就别1:1对应了，1个css的px对应多个物理像素吧，这样就不至于显示的内容过小。

在开发时写的px和最终渲染显示的物理像素不是1:1的，可能1个px对应2个物理像素、或3个物理像素。

 

多倍图

在移动端开发里声明了视口标签，由于分辨率与像素比的影响，会自动放大图片会造成图片模糊

我们需要准备比图大2倍甚至3倍进行缩小，才不会模糊。这也就是2x图，3x图的由来。

 

媒体查询

    /* 设定小于750像素的样式 手机端*/
    @media screen and (max-width: 749px) {}

    /* 设定大于1200像素的样式 PC端*/
    @media screen and(min-width:1200px) {}

    /* 设定大于750且小于1200的样式 平板*/
    @media screen and(min-width:750px) and (max-width: 1200px) {}