大前提: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 ); };
方法三
!(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-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { html { font-size: 117.1875px; } } /* iphone6 plus */ @media (min-device-width: 414px) and (max-device-width: 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; }
时间: 2024-11-06 23:34:56