移动端自适应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

上一篇下一篇

猜你喜欢

热点阅读