自适应布局方案
不同机型不同屏幕大小的适配是前端开发的重点突破对象。 实现自适应布局方案有：
- 自适应单位
- em、rem（web端）、rpx（小程序端）、vw、vh（相对于窗口大小）
各单位区别
- px： 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，1px等于一个像素点的大小，是计算 机系统的数字化图像长度单位。
- em：相对于父级元素的字体大小，因此并不是一个固定的值。如当前对行内文本的字体尺寸未被人为设置， 则相对于
浏览器的默认字体尺寸。 - rem：是 HTML 根元素的字体大小（1rem等于字体大小）
- vw：1vw 等于视口宽度的
1%。 - vh：1vh 等于视口高度的
1%。
注意：视口单位中的“视口”，PC端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport
- 媒体查询 CSS系列 -- 媒体查询（用来检测媒体设备）
- flex 布局 CSS系列 -- flex布局
- grid 布局 CSS系列 -- grid布局
- calc()的使用 calec()是CSS3新增的一个功能，用来动态计算并指定元素的长度、边距等
calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”
关于calc()的一些特性：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格
