动态计算rem

使用 Flexible 实现手淘 H5 页面的终端适配

https://github.com/amfe/lib-flexible

动态计算 rem 基准大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 动态计算 rem 基准大小
*/
!(function(doc, win) {
var docEle = doc.documentElement,
evt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
fn = function() {
var width = docEle.clientWidth
width && (docEle.style.fontSize = 20 * (width / 320) + 'px')
}

win.addEventListener(evt, fn, false)
doc.addEventListener('DOMContentLoaded', fn, false)
})(document, window)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算,需要在 css 中的 body 选择器中声明 Font-size=62.5%,这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10,然后换上 em 作为单位就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
html {
font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem; /*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem; /*2.4 × 10px = 24px*/
}
p {
font-size: 14px;
font-size: 1.4rem;
} /*IE8及之前版本的IE浏览器使用14像素*/

下面列出几种常见设计稿相应的 font-size 值:

deviceWidth = 320,font-size = 320 / 6.4 = 50px
deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500,font-size = 500 / 6.4 = 78.125px

也可使用 JS 计算:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
;(function() {
document.addEventListener(
'DOMContentLoaded',
function() {
var html = document.documentElement
var windowWidth = html.clientWidth
html.style.fontSize = windowWidth / 6.4 + 'px'
// 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
},
false,
)
})()
// 这个6.4就是根据设计稿的横向宽度来确定的,假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';

webapp font-size 解决问题的方案

坚持原创技术分享,您的支持将鼓励我继续创作!