前端基础之《Vue（20）—移动端REM布局》
一、什么是webapp
1、长的像app，交互也像app的H5页面。
webapp不是App，不需要安装，手机网页直接打开。
二、移动端web的布局方案
1、例如：rem布局、vw/vh布局、flexible布局。
推荐使用rem布局，解决不同手机之间的样式兼容性问题。
2、原因
手机像素密度不一样，屏幕宽度、屏幕分辨率不一样。
在移动端写样式一般不用px做单位，px是绝对单位，要用相对单位去做。
3、rem.js
// 作用：重置html的font-size大小
// 让html根字体的大小，等于当前屏幕px像素的10分之1function resetRootFZ() {// 1.通过dom操作，找到htmlvar oHtml = document.querySelector('html')// 2.获取这个html的宽度var w = oHtml.getBoundingClientRect().width // px（当前屏幕的总宽度）// 3.设置根字体的大小等于html节点的宽度的十分之一oHtml.style.fontSize = w/10 + 'px'
}// 调用这个方法
resetRootFZ()// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener('resize', function(){// 屏幕发生resize事件，重新设置根字体resetRootFZ
})4、在index.html的<head>引入
<script src="./rem.js"></script>5、比较
（1）类型一
（2）类型二
6、css的单位
（1）rem: root font size
.box {
width: 2rem;
}
宽度是html根字体的两倍。
（2）em: 相对于最近一个父元素的fontSize
（3）px: 绝对单位
（4）vw vh
三、UI稿量尺寸
1、量稿子的单位是px
2、移动端的UI搞，一个轮播图，宽度是750px，高度是352px
3、352px怎么转换成rem
750px对应10rem，352px则是：352*10/750 = 352/75
4、vscode里以后计算用插件“px to rem”