步骤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