移动端布局
宽高不能固定
手机截图,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;