rem布局
布局前插入原生js即可
(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
还有弹性布局flex、百分比布局
百分比布局：
html {font-size: 62.5%; /* 10÷16=62.5% */}@media only screen and (min-width: 481px){html {font-size: 94%!important; /* 15.04÷16=94% */}}@media only screen and (min-width: 561px){html {font-size: 109%!important; /* 17.44÷16=109% */}}@media only screen and (min-width: 641px){html {font-size: 125%!important; /* 20÷16=125% */}}
rem布局bug-页面短暂闪烁或界面由小变大：
将body设置属性 style="visibility:hidden",待页面加载完后，设置属性 visibility:visible
2、手淘flexible页面适配
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN：
<script src="/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
CSS处理器(SASS)
@function px2rem($px, $base-font-size: 75px) {@return ($px / $base-font-size) * 1rem;}
参数$base-font-size: 75px，可以通过(psd文件的宽度/10)来计算。假如psd宽750，则$base-font-size为75px
//比如量取box宽为190，高为190，则代码：.box {width: px2rem(190px);height: px2rem(190px);}
如果觉得《手机端页面自适应解决方案-rem布局》对你有帮助，请点赞、收藏，并留下你的观点哦！
