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

【转载】rem自适应布局-移动端自适应必备

2017-03-20 14:50 671 查看
原文链接：rem自适应布局-移动端自适应必备 版权所有，转载时请注明出处，违者必究。

由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。

rem
是相对于根元素
<html>
，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。·

阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

实现方法：

通过js来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下：

1 ;(function(win, lib) {
2     var doc = win.document;
3     var docEl = doc.documentElement;
4     var metaEl = doc.querySelector('meta[name="viewport"]');
5     var flexibleEl = doc.querySelector('meta[name="flexible"]');
6     var dpr = 0;
7     var scale = 0;
8     var tid;
9     var flexible = lib.flexible || (lib.flexible = {});
10
11     if (metaEl) {
12         console.warn('将根据已有的meta标签来设置缩放比例');
13         var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
14         if (match) {
15             scale = parseFloat(match[1]);
16             dpr = parseInt(1 / scale);
17         }
18     } else if (flexibleEl) {
19         var content = flexibleEl.getAttribute('content');
20         if (content) {
21             var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
22             var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
23             if (initialDpr) {
24                 dpr = parseFloat(initialDpr[1]);
25                 scale = parseFloat((1 / dpr).toFixed(2));
26             }
27             if (maximumDpr) {
28                 dpr = parseFloat(maximumDpr[1]);
29                 scale = parseFloat((1 / dpr).toFixed(2));
30             }
31         }
32     }
33
34     if (!dpr && !scale) {
35         var isAndroid = win.navigator.appVersion.match(/android/gi);
36         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
37         var devicePixelRatio = win.devicePixelRatio;
38         if (isIPhone) {
39             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
40             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
41                 dpr = 3;
42             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
43                 dpr = 2;
44             } else {
45                 dpr = 1;
46             }
47         } else {
48             // 其他设备下，仍旧使用1倍的方案
49             dpr = 1;
50         }
51         scale = 1 / dpr;
52     }
53
54     docEl.setAttribute('data-dpr', dpr);
55     if (!metaEl) {
56         metaEl = doc.createElement('meta');
57         metaEl.setAttribute('name', 'viewport');
58         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
59         if (docEl.firstElementChild) {
60             docEl.firstElementChild.appendChild(metaEl);
61         } else {
62             var wrap = doc.createElement('div');
63             wrap.appendChild(metaEl);
64             doc.write(wrap.innerHTML);
65         }
66     }
67
68     function refreshRem(){
69         var width = docEl.getBoundingClientRect().width;
70         if (width / dpr > 540) {
71             width = 540 * dpr;
72         }
73         var rem = width / 10;
74         docEl.style.fontSize = rem + 'px';
75         flexible.rem = win.rem = rem;
76     }
77
78     win.addEventListener('resize', function() {
79         clearTimeout(tid);
80         tid = setTimeout(refreshRem, 300);
81     }, false);
82     win.addEventListener('pageshow', function(e) {
83         if (e.persisted) {
84             clearTimeout(tid);
85             tid = setTimeout(refreshRem, 300);
86         }
87     }, false);
88
89     if (doc.readyState === 'complete') {
90         doc.body.style.fontSize = 12 * dpr + 'px';
91     } else {
92         doc.addEventListener('DOMContentLoaded', function(e) {
93             doc.body.style.fontSize = 12 * dpr + 'px';
94         }, false);
95     }
96
97
98     refreshRem();
99
100     flexible.dpr = win.dpr = dpr;
101     flexible.refreshRem = refreshRem;
102     flexible.rem2px = function(d) {
103         var val = parseFloat(d) * this.rem;
104         if (typeof d === 'string' && d.match(/rem$/)) {
105             val += 'px';
106         }
107         return val;
108     }
109     flexible.px2rem = function(d) {
110         var val = parseFloat(d) / this.rem;
111         if (typeof d === 'string' && d.match(/px$/)) {
112             val += 'rem';
113         }
114         return val;
115     }
116
117 })(window, window['lib'] || (window['lib'] = {}));


从上面的代码，主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px';

假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。

假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。

而采用以上rem的方法，则只需要输出2.5rem就能实现统一，如下表格：

设备宽度320px360px414px640px
Html字体大小32px36px41.4px64px
实际输出1rem1rem1rem1rem
设计稿缩放大小80px90px103.5px160px
实际输出2.5rem2.5rem2.5rem2.5rem
以上的2.5rem是怎么得出的呢？

160/64（1rem的基数为64px）=2.5rem;按照官方的说法（750px举例）

Flexible会将视觉稿分成
100份
（主要为了以后能更好的兼容
vh
和
vw
），而每一份被称为一个单位
a
。同时
1rem
单位被认定为
10a
。针对我们这份视觉稿可以计算出：

1a   = 7.5px
1rem = 75px

那么我们这个示例的稿子就分成了
10a
，也就是整个宽度为
10rem
，
<html>
对应的
font-size
为
75px
：

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的
px值
除以
rem基准值
即可。例如此例视觉稿中的图片，其尺寸是
176px * 176px
,转换成为
2.346667rem * 2.346667rem
。

另外大漠还写了一篇详细的文章：使用Flexible实现手淘H5页面的终端适配 里面介绍了一个如何快速转换rem为px的几种方法，感兴趣的童鞋可以去看看。

也可以看这篇文章：Sass函数功能——rem转px

另外在使用这个来处理自适应的另一个坑就是css sprite，作者的建议是使用svg，或者icon font.或者base64等其他方案。

另外就是在dpr=2时，小图片可能会出现模糊，建议以最大的图片来切图。

字体建议使用px

在作者的观点中，是建议描述性的字体使用px，如果有slogan之类大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字体不同，可能出现13px和15px,点阵字体。


显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是
16px
和
24px
，所以我们不希望出现
13px
和
15px
这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，
rem
并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用
px
作为单位。只不过使用
[data-dpr]
属性来区分不同
dpr
下的文本字号大小。

div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}

为了能更好的利于开发，在实际开发中，我们可以定制一个
font-dpr()
这样的Sass混合宏：

@mixin font-dpr($font-size){
font-size: $font-size;

[data-dpr="2"] & {
font-size: $font-size * 2;
}

[data-dpr="3"] & {
font-size: $font-size * 3;
}
}

有了这样的混合宏之后，在开发中可以直接这样使用：

@include font-dpr(16px);

当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用
rem
给slogan做计量单位。


DEMO

请用手机扫下面的二维码





更新【2016年01月13日】

首先，由衷的感谢@完颜 帮忙踩了这个坑，回想起ios从7~8，从8~9，都踩过只至少一个坑，真的也是醉了。

手淘这边的flexible方案临时升级如下：

针对OS 9_3的UA，做临时处理，强制
dpr
为
1
，即
scale
也为
1
，虽然牺牲了这些版本上的高清方案，但是也只能这么处理了

这个版本不打算发布到CDN（也不发不到tnpm），所以大家更新的方式，最好手动复制代码内联到
html
中，具体代码可以点击这里下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航