使用以rem为度量单位实现webapp自适应布局。

由于移动设备屏幕尺寸的多样性，在网页制作过程中在不同的尺寸的浏览器下字体的大小需要随着屏幕的尺寸的变化而变化。这里介绍的方法是根据不同的设备尺寸，使用rem为度量单位，动态的改变根节点的字体大小，达到不同设备下字体的适应。

一. rem

1.px，em，rem的不同

  • px：当用px设置字体时，页面缩放时无法自动改变字体大小
  • em：相对于父视图的字体大小计算
  • rem：相对于根元素的字体大小计算

2.px为单位

以px为单位，当在web浏览器中呈现合适的页面，在移动端打开时会发现字体的大小没有随着屏幕的缩小而减小，在不同尺寸的移动端屏幕下会呈现相同的字体大小。

3.em为单位

em是相对于父元素的字体大小计算的，举例：

html片段：

1
2
3
4
5
6
7
8
9
<html>
    <body>
        <h1>html片段
            <p>html片段
                <span>html片段</span>
            </p>
        </h1>
    </body>
</html>

页面在不缩放的情况下100%，字体的默认16px（font-size：1em），为了方便换算设置body{font-size: 62.5%}，也就是10px=1em（实际情况下，chrome最小字体为12px）。

1
2
3
4
5
6
7
8
9
10
11
12
body {
    font-size: 62.5%; /* 1em = 10px */
}
h1 {
    font-size: 1.4em; /* 14px */
}
p {
    font-size: 1.4em; /* 这里1em = 14px，所以1.4*14 = 19.6px */
}
span {
    font-size: 1.4em; /* 这里1em = 19.6px，所以1.4*19.6 = 27.44px */
}

可以看到在每次给出元素字体的大小时总要考虑其父视图的字体大小，十分的不方便。em与px换算

4.rem为单位

rem是相对与根元素的font-size计算的，以上例子

1
2
3
4
5
6
7
8
9
10
11
12
html {
    font-size: 16px; 
}
h1 {
    font-size: 1.4rem; /* 16*1.4 = 22.4 */
}
p {
    font-size: 1.4rem; /* 16*1.4 = 22.4 */
}
span {
    font-size: 1.4rem; /* 16*1.4 = 22.4 */
}

字体的大小相同，rem兼容情况。rem在IE下的兼容不足，但在webapp下使用还是没问题的，毕竟IE浏览器内核用在手机浏览器上的比较少。

二. viewport

通常在移动设备上显示网页，我们会在head中添加：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.viewport概念

一般情况下，viewport为屏幕的可视区域。移动端下的viewport默认大于自身屏幕的宽度，用来兼容显示pc下的网页，因此在不做兼容的情况下，pc上的网页在移动设备打开，常见的是横向滚动条。在设置viewport后，设置content=”width=device-width”，网页宽度会与屏幕宽度相同，viewport等于自身屏幕的宽度。

2.像素

通常情况下，即window.devicePixelRatio = 1时，css中的1px等于设备的1px。但随着手机的屏幕像素密度的提高，而手机实际像素远远大于物理屏幕的宽度高。iPhone3分辨率320x480，等于其物理尺寸，iPhon4的retina屏出来后，分辨率为分辨率640x980，window.devicePixelRatio = 2，css中的1px等于设备的2px；iPhone6+，window.devicePixelRatio = 3，css中的1px等于设备的3px。

3.动态的设置viewport

主要方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var scale = 1 / window.devicePixelRatio,
    content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
var viewportEl = document.querySelector('meta[name="viewport"]')
if (viewportEl) {
    viewportEl.setAttribute('content', content);
} else {
    viewportEl = document.createElement('meta');
    viewportEl.setAttribute('name', 'viewport');
    viewportEl.setAttribute('content', content);
    document.head.appendChild(viewportEl);
}
window.addEventLister('resize', function() {
    var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
    document.documentElement.style.fontSize = ( innerWidth*20/320 ) + 'px';
})

参考：hotcss.js