移动端布局

来源：互联网发布：淘宝客推广会亏本吗编辑：程序博客网时间：2024/05/20 23:38

默认以宽度为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>

0 0