01-移动端单位

单位
rem html字体大小的倍数
视口
布局视口 网页的宽度
视觉视口 设备的宽度
理想视口 布局视口 = 视觉视口
设置视口大小为设备宽度
meta name=’viewport’ content=’device-width’

02-移动端适配

适配方案
1. rem + 媒体查询
根据不同的机型设置不同的html的font-size
2. rem + vw 适配
vw 视窗宽度的比例
1vw = 视窗宽度的1%
需要把html的font-size根据不同的屏幕宽度改成不同的数值，rem就会成比例进行变换
html的font-size和屏幕宽度成比例
已知屏幕宽度320px
320px = 100vw 320px = 100x 1x= 3.2px
50px = (50/3.2)
50px = 15.625vw
=============
320px 50px = 15.625vw
375px 15.625vw = 58.59375px
414px 15.625vw = 64.6875px
3. flexable.js 插件
根据屏幕的宽度动态设置html的font-size
步骤
1. js文件中 第76行 var rem = width*50/320
把尺寸改成设计图的宽度
2. 引入js，把视口代码去掉
—>

03-移动端布局方案


<!—
移动端结构
- 头部固定，头部和主体不重叠
弹性盒
html,body {
height: 100%
}
body {
display: flex;
flex-direction: column
}
main {
flex:1:// 占据剩余空间
overflow: auto // 出现滚动条
}
- 头部固定， 头部和主体滚动的时候有重叠
头部固定定位