移动端

响应式设计原则，移动优先

主要 1、 媒体查询

         2、栅格系统

设备像素比  dpr =物理像素/css像素  代表一个css像素在移动端代表多少个物理像素点

ppi 每英寸所含有的像素数目   

em大小是相对于父节点的大小，可继承父元素

rem是继承html的设置

浏览器默认最小字体为12px

设置rem：获取当前屏幕的宽度除以固定的数字，作为不同宽度下的rem的值

css +- 时前后要有空格

:root{}  存放变量

layout=cilentWidth/initial-scale

1vw=window.innerWidth的1%

转载

根据上面DPR解释可以知道在DPR为2的屏幕上会使用四个设备像素来描述一个CSS像素。在这种情况下一张100*100的图片在页面上的尺寸也是100*100那么其实是200*200个物理像素来描绘这张图片，很明显图片的像素是不够的，这时候系统就会让剩下的像素就近取色，这样就造成了图片的模糊，想要图片不模糊要么提供一个200*200的图片，要么将页面上100*100的容器缩小到50*50。在DPR为2的屏幕上高度的1px其实是由2个物理像素描绘的，所以该屏幕可以描绘的最小像素应该是0.5px，所以这个1px应该是0.5px才对。
---------------------