移动web开发适配秘籍Rem
移动web开发的特点
- 运行在手机端web页面（H5页面）： 对于手机而言，兼容HTML5所有的新特性
- 跨平台性：可以运行在PC端、IOS端 、安卓端，
- 基于webview：webView是移动端提供的运行JavaScript的环境，是系统渲染Web网页的一个控件，可与页面JavaScript交互，实现混合开发，其中Android和 IOS又有些不同：
- 告别 IE 拥抱webkit：对于日常的PC开发来说，需要兼容各种各样厂商的浏览器，但是对于移动web，基本就告别了浏览器厂商的兼容性，因为移动端手机webview基本上都是基于webkit内核。
- 更高的适配性和性能要求：程序运行在手机端，但手机屏幕尺寸各式各样，性能方面跟PC相比要相对差一点，网络状况也是错综复杂。
Rem 布局适配原理
rem 是（font size of the root element），就是一个字体单位，根据 html 根元素的字体大小，实时变化 。 浏览器 默认字体大小是 16px 。
- 字体单位：值根据 html 根元素字体大小而定，同样可以作为宽度，高度等单位
- 适配原理：将 px 替换成 rem ，动态修改 html 的font-size适配
- 兼容性：IOS6.1+ 和Android2.1+，基本覆盖所有流行的手机系统
rem 基准值及数值计算
基准值： html 根元素字体大小的值，默认font-size: 16px，适配需要根据屏幕尺寸动态修改html font-size，方式：Media Query（媒体查询） 和 JS 动态获取
数值计算：px 值经换算得到的 rem 值 ，如1rem = 16px ，10rem = 160px
750的设计稿，宽高240px， 字体大小24px ， 使用以下方式实现适配
Media Query（媒体查询）
在一些相对简单的页面，可以使用定高宽度百分比的布局，而使用Media Query（媒体查询）和Flex布局，也基本上能够达到实现响应式布局的要求。
但是移动端屏幕尺寸太多了，针对每一个尺寸都写一套media 不太现实，写css样式时也不应该依赖css的顺序，后一个覆盖前一个，这样不利于维护和代码的可读性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>Rem</title>
<style type="text/css">
.box {
width: 10rem;
height: 10rem;
background-color: blue;
font-size:1rem;
color: #fff;
}
@media screen and (max-width:376px) and (min-width:321px) {
html {
font-size: 24px;
}
}
@media screen and (max-width:320px) {
html {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="box">
hello rem
</div>
</body>
</html>
scss 工程使用函数计算
rem:37.5px 就是页面的基准值，写样式时须以一个确定的屏幕来作为参考(视觉稿), 假如视觉稿是以 iphone6 的屏幕为基准设计的，iPhone6 的屏幕大小是 375px，
@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
/* 使用 */
.box {
width: px2rem(240px);
height: px2rem(240px);
background-color: blue;
font-size:px2rem(24px);
color: #fff;
}
JS动态获取屏幕的宽度
以一个确定的屏幕来作为参考(视觉稿)，再通过JS动态获取屏幕的宽度，设置rem基准值：
<style type="text/css">
.box {
width: 5rem; // 以一个确定的屏幕来作为参考(视觉稿) 1rem = 37.5px
height: 5rem;
background-color: blue;
font-size:1rem;
color: #fff;
}
</style>
<body>
<div class="box">
hello rem
</div>
</body>
<script>
// 获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
console.log(htmlWidth);
let htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth/10 + 'px'
// 监听页面 缩放事件
window.addEventListener('resize',function(){
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
htmlDom.style.fontSize = htmlWidth/10 + 'px' // iP6， 375 / 10 = 37.5
})
</script>
直接将html 的 font-size 设置成 100px
一般情况，根据px值 计算rem值较为繁琐，还可以将 html 的 font-size 设置成 100px，直接将数值除以 100 在加上 rem 。
<style type="text/css">
.box {
width: 2.4rem; // 以一个确定的屏幕来作为参考(视觉稿) 1rem = 37.5px
height: 2.4rem;
background-color: blue;
font-size:0.24rem;
color: #fff;
}
html{
font-size:100px;
}
</style>
<body>
<div class="box">
hello rem
</div>
</body>
