您的位置：首页 > 移动开发

移动端布局 - REM方式

2017-02-15 12:52 316 查看

默认以宽度为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 ? 'orientationchange' : '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.px2rem = function(v) {
return v * 1 / rem;
}

win.rem2px = function(v) {
return v * 1 * rem;
}

win.rem = rem;

}

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>

BUG 修复

2017/02/25 -- 添加了

px2rem

rem2px

便捷换算方法，以及为

window

附加了 rem 属性，可以方便查询当前rem与px的对应关系

2017/02/23 -- 修正翻转屏事件通过

addEventListenner

绑定时使用

onorientationchange

引发的失效

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航