CSS
响应式设计
响应式设计推荐原则
优先选用流式布局,如百分比、flex、grid等； 使用响应式图片,匹配尺寸,节省带宽； 使用媒体查询为不同的设备类型做适配； 给移动端设备设置简单、统一的视口 使用相对长度,em、rem、vw做为长度度量；
媒体查询
设备像素、参考像素和移动设备视口
设备像素(物理像素):显示器上绘制的最小单位, 显示屏通过控制每个像素点的颜色,使屏幕显示出不 同的图像。
设备像素和设备相关,屏幕从工厂出来那天起, 它上面的物理像素点就固定不变了。
DPI&&PPI:
dpi(dotsper inch):每英寸多少点。
ppi(pixels per inch):每英寸多少像素数。
当用于描述显示器设备时ppi与dpi是同一个概念, 说的是每英寸多少物理像素及显示器设备的点距。
CSS像素
DPR设备像素比：
移动端的viewport
viewport的meta标签中的属性设置:PC上不生效，只有移动端生效：
相对长度 em rem vw vh
em:
rem:
rem:根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size,所以不会像em那样出现多重嵌套问题,减少了复杂性,同时作为一个相对单位,可以进行适配放缩,可以用来做响应式布局
vw和vh:
vw:视窗宽度的1%。vh:视窗高度的1%。同样,vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%,所以不需要js动态配置。
和rem方案类似,方案设定可以如下:
CSS生态
语言增强:预处理器、后处理器 工程架构:CSS模块化、CSS-In-Js、AtomicCSS
预处理器：
样式处理流程：
后处理器
postcss机制
CSS模块化
CSSModule就是为了解决全局污染问题出现的方案,解决CSS全局污染,本质上是保证样式集合对应的选择器是唯一的, 从这个角度看,主流的单纯针对于防止全局污染的方案大概有:
IFC
行排版上下文:
.Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
・IFC内的排版规则：
盒子在一行内水平摆放
一行放不下时,换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动((float)元素
BFC
BFC内部排版规则:
