大前提:
1、initial-scale 为 1;
2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 100px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;
html{fontSize:100px}
需要全屏的话加上CSS
html{height:100%;position:relative;} body{margin:0 auto;height:100%;}
方法一
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; }; // Abort if browser does not support addEventListener if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
方法二(用的不错)
new function (){ var _self = this ; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认字体大小 _self.widthProportion = function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;}; _self.changePage = function (){ document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important"); } _self.changePage(); window.addEventListener('resize', function (){_self.changePage();}, false ); };
//设计稿是640PX 则宽度为640/100=6.4rem
方法三(640/750是设计稿尺寸可以修改,使用时候除以100为REM尺寸)
!(function(win, doc){ function setFontSize() { // 获取window 宽度 // zepto实现 $(window).width()就是这么干的 var winWidth = window.innerWidth; doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ; } var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'; var timer = null; win.addEventListener(evt, function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); // 初始化 setFontSize(); }(window, document))
方法四(媒体查询)
换算rem工具(https://offroadcode.com/prototypes/rem-calculator/)
@charset "UTF-8"; /* 320px布局 */ html { font-size: 100px; } body { font-size: 0.14rem; } /* iphone 6 */ @media (min-device- 375px) and (max-device- 667px) and (-webkit-min-device-pixel-ratio: 2) { html { font-size: 117.1875px; } } /* iphone6 plus */ @media (min-device- 414px) and (max-device- 736px) and (-webkit-min-device-pixel-ratio: 3) { html { font-size: 129.375px; } } p { border: 1px solid #eee; padding: 0.1rem; } .f12 { font-size: 0.12rem; } .f14 { font-size: 0.14rem; } .f16 { font-size: 0.16rem; } .f24 { font-size: 0.24rem; } .f30 { font-size: 0.30rem; } .f36 { font-size: 0.36rem; }
方法五
/** * [以iPhone6的设计稿为例js动态设置文档 rem 值] * @param {[type]} currClientWidth [当前客户端的宽度] * @param {[type]} fontValue [计算后的 fontvalue值] * @return {[type]} [description] */ <script> var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿) originWidth=375; __resize(); //注册 resize事件 window.addEventListener('resize', __resize, false); function __resize() { currClientWidth = document.documentElement.clientWidth; //这里是设置屏幕的最大和最小值时候给一个默认值 if (currClientWidth > 640) currClientWidth = 640; if (currClientWidth < 320) currClientWidth = 320; // fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2); document.documentElement.style.fontSize = fontValue + '%'; }
//如设计稿是750PX 则宽度为750/20=37.5rem </script>