移动端适配-rem
rem是一个尺寸单位
使用rem实现移动端适配
- rem的单位是一个html的标签字号的尺寸
- 1rem=1html字号大小(根标签字号：网页的根标签就是html标签，html字号也叫根标签字号)
- 根据屏幕的尺寸添加不同的媒体查询
@media(width:屏幕尺寸){ html{ font-size:屏幕尺寸/10; } }
工作中的习惯把根标签字号设置为窗口尺寸的1/10;
- 把像素单位转换成rem
width:(50 / 37.5rem);
flexible.js是手淘开源出的适配移动端的js框架。我们可以直接引用。
移动端适配-vm／vh
部分大厂已经成为先驱者
- vm是把窗口宽度均分成100分
- vh是把窗口高度均分成100分
- 适配的过程和rem一样，把px像素单位转换成vm单位
- vm和vh不需要添加媒体查询
- 这样浏览器就会根据屏幕的尺寸来适配
- 在375px宽度下定义宽度为50像素单位转换成vm：width:(50 / 3.75vm);
- 在667px高度下定义高度为100像素转换vh：height:(100 /6/67vh);
- 因为iphone在宽度相同的也会有不同高度的屏幕设备，所以在一个项目中不要vm和vh混用。
- 因为开发中设计师一般给的尺寸是以屏宽375的设计图，所以适配一般把像素单位／3.75转换成vm单位
