移动端自适应px转rem
2019-02-02 本文已影响0人
Victor_818
第一步:设置表头
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
第二步:引入js
(function(designWidth, maxWidth) {
doc = document.documentElement,
remStyle = document.createElement("style"),
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth; // 实际屏幕宽度相对于设计稿需要缩放的倍数*100
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
refreshRem();
}(750, 750)
js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)。使用的时候将设计稿的尺寸除以100就是所需要的rem值,例如设计稿为750,则body的宽度就是7.5rem。
rem转化px的核心思想就是动态设置html的font-size,实际的尺寸 = rem * font-size