美文网首页
移动端自适应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