美文网首页
移动端自适应px转rem

移动端自适应px转rem

作者: Victor_818 | 来源:发表于2019-02-02 16:26 被阅读0次

    第一步:设置表头

        <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

    相关文章

      网友评论

          本文标题:移动端自适应px转rem

          本文链接:https://www.haomeiwen.com/subject/gaissqtx.html