视口标签
<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- 749px) {}
/* 设定大于1200像素的样式 PC端*/
@media screen and(min-1200px) {}
/* 设定大于750且小于1200的样式 平板*/
@media screen and(min-750px) and (max- 1200px) {}