理解css(二)完 | 字节青训营笔记1. 响应式设计 1.1 响应式设计原则优先选用流式布局，如百分比、flex、

1. 响应式设计

1.1 响应式设计原则

优先选用流式布局，如百分比、flex、 grid等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度，em、rem、vw 做为长度度量

1.2 媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print) 以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

使用媒体查询的一些Tips:

媒体查询同样遵循cascading层叠覆盖原则，min- 和max-选择一个
由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择，而不是屏幕大小
由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

媒体查询学习参考：developer.mozilla.org/zh-CN/docs/…

1.3 设备像素

设备像素(物理像素) :显示器上绘制的最小单位,显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。

设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

1.4 CSS像素

CSS像素也叫参考像素。CSS像素(reference pixel) 其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI (即1英寸96点)的设备输出时，1点(即1/96英寸)的视角。

通常认为常人臂长为28英寸，那么视线与水平线的夹角是:(1/96)in / (28in* 2 * PI/ 360deg) = 0.0213度

存在意义：保证在不同设备上的阅读体验是相对一致的。

1.5 viewport

布局视口(viewport)是页面中html元素(根元素)的包含块，默认情况下，window.document.documentElement.clientWidth 就是viewport的宽度。在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用<meta>标签对viewport进行设定，来完成移动端设备的适配。

移动端 viewport 的 meta 标签中的属性：

width
height
initial-scale
minimum-scale
maximum-scale
user-scalable：是否允许用户缩放

initial-scale在未设定时，如果width设定了，那么它会自动设置放缩值:initial-scale =屏幕宽度(例子中是390) / 980 ≈ 0.398。相比scale=1的时候，缩小了0.398倍

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

1.6 相对长度

em

rem：根据根元素的字体大小确定。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像 em 那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局.

vw 和 vh：vw：视窗宽度的1%。vh：视窗高度的1%。同样，vw 也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。和rem方案类似，方案设定可以如下:

移动端页面适配方案参考：www.w3cplus.com/css/vw-for-…

2. CSS生态相关

因为目前CSS的可编程性较差，不可维护性较高，代码污染啊等等问题催生出一系列的处理器。

2.1 常见样式处理流程

2.2 语言增强-CSS预处理器

预处理器如何提高研发效率？

自定义变量：提高可复用性
嵌套、作用域：避免全局污染、结构层次清晰、减少复杂组合选择器
mixins、继承：提高可复用性、可维护性
操作符、条件或循环语句、自定义函数：提高可编程能力、增加灵活性

SCSS、less、stylus简单对比：

2.3 语言增强-CSS后处理器

cssnano：cssnano.co/

stylelint：github.com/stylelint/s…

autoprefixer：github.com/postcss/aut…

postcss-custom-properties：github.com/csstools/po…

postcss-custom-media：github.com/csstools/po…

postcss-nested：github.com/postcss/pos…

doiuse：github.com/anandthakke…

postcss plugins：postcss.org/docs/postcs…