默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配。
具体代码
(function(win,doc){
var timer = null,
html = doc.documentElement,
baseWidth = html.dataset.basewidth*1 || 640,
metaEl = document.querySelector('meta[name="viewport"]'),
event = 'onorientationchange' in win ? 'onorientationchange' : 'resize';
if(!metaEl){
metaEl = document.createElement('meta');
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content','initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0');
html.firstElementChild.appendChild(metaEl);
}
function layoutCalc(){
var width = html.getBoundingClientRect().width,
ratio = width / baseWidth * 100,
devicePixelRatio = window.devicePixelRatio,
rem = ratio < 100 ? ratio < 50 ? 50 : ratio : 100;
if(!/\.\d+/.test(devicePixelRatio.toString())){
html.dataset.dpr = devicePixelRatio;
}
html.style.fontSize = rem + 'px';
}
win.addEventListener(event,function(){
clearTimeout(timer);
timer = setTimeout(layoutCalc,300);
},false);
win.addEventListener('pageShow',function(e){
if(e.persisted){
clearTimeout(timer);
timer = setTimeout(layoutCalc,300);
}
},false);
layoutCalc();
}(window,document));
使用说明:
· 自定义基准页面尺寸
通过为 html
标签添加 data-basewidth
属性来指定基准页面的尺寸。
示例:
<html data-basewidth="750" >
...
</html>
· 定义页面内容的字体大小
对于一些符合标准的dpr值(只要是整数,例如:1,2,3)等,都会为 html
标签再附加一个 data-dpr
属性,然后开发者可以通过该属性来结合CSS规则,从而实现对于不同dpr情况下,对内容字体大小的调整。
示例代码:
html[data-dpr="1"] .dpr-text{
font-size:12px;
}
html[data-dpr="2"] .dpr-text{
font-size:24px;
}
html[data-dpr="3"] .dpr-text{
font-size:36px;
}
<p class="dpr-text">测试文字</p>