rem移动端适配个人总结

IMG_6112.JPG

步骤1：根据需求选择一种
竖屏适配

<meta name="viewport" content="width=device-width,user-scalable=no" />
<script>
// 条件：尺寸越大，则字体大小越大。尺寸越小，则字体大小越小。

// 获取html节点
var html = document.getElementsByTagName('html')[0]; 
// 获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
//或者通过document.documentElement.clientWidth获取宽度
 
// 设置html的font-size大小：屏幕宽度 / 固定数值 = 基准值（基准值任何整数都行）
html.style.fontSize = pageWidth / 16 + "px";
</script>

横竖屏适配

<meta name="viewport" content="width=device-width,user-scalable=no" />
<script>
setRem();
window.addEventListener("orientationchange", setRem);
window.addEventListener("resize", setRem);
function setRem() {
    var html = document.querySelector("html");
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width / 16 + "px";
}
</script>

步骤2：样式文件。submile自动转rem（安装插件的前提，附安装教程）

https://blog.csdn.net/Revival_Liang/article/details/62896020?fps=1&locationNum=2

参考文章：

http://www.cnblogs.com/hello-web/p/7221430.html
https://www.cnblogs.com/phoebewang00/p/5583938.html
http://div.io/topic/1092?page=2
https://blog.csdn.net/sinat_17775997/article/details/62416605
https://blog.csdn.net/qq_36800701/article/details/79666938

rem移动端适配个人总结

推荐阅读更多精彩内容