移动端布局
宽高不能固定
手机截图，ps中量出来的数据为物理像素
浏览器中显示的宽高为设备的独立像素
dpr
设备像素比
物理像素：设备独立像素=2：1；有小数留2位，1px不计算
设计图最上面的电池高度
不写，一般电池区高度为40
头部标签
meta 且写在style之前
响应式布局
1、媒体查询引入 media
2、特点
1）建立灵活的网格基础
2）图片可伸缩
3）必须用媒体查询
3、断点
每个断电会有对应的样式
头尾固定页面
1、html，body（height：100%）
2、body（display：flex；flex-direction：column）
3、header，footer（height：value）
4、section（flex：1；overflow：auto）
尾部固定
给尾部条加固定定位
像素的页面
文字、图片和容器不变，只变间距
px+百分比+弹性盒子
rem的页面
文字、图片和容器都在变
rem+百分百+弹性盒子
rem
相对单位，相对于根元素html的字号大小
即1rem=html{font-size：valve}
em
相对父元素的字号大小
vw
相对单位，相对于窗口的宽度，默认满屏时是100vw
根元素的字号大小单位vw，用rem写页面时，行内元素和行内块元素都要转块或浮动
rem、vw、px间的换算
看后台时
1rem=100px
1vw=浏览器实际像素/100
ps测量时
1rem=100px
1vw=（ps测量数值/2）/100
多列布局
父元素 column-count/分栏个数 width分栏宽度 gap分栏间距 rule分栏边框
子元素 column-span：1或all 合并分栏
中间自适应三栏布局
1、右边右浮动，左边左浮动，中间不写宽，且减去左右两边的宽度
2、左边绝对定位，left：0
右边绝对定位，right：0
中间减去左右两边的宽度
3、左右给固定宽，中间给flex：1
（body）父元素给display：flex；justify：space-between；