响应式设计原则,移动优先
主要 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才对。
---------------------