在网页制作过程中,经常用rem来实现各个屏幕的适配,但是有与设备众多,手动设置经常有匹配不到的情况,所以用jquery检测窗口大小,自动适配字体大小,这里是用taobao的flexible.js+rem实现的适配,话不多说,直接上代码:
(function flexible(window, document) {
// flexible.js原代码
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 101
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', f