移动端自适应px转rem

第一步:设置表头

    <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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 现在回过头来看,感觉自己以前写复杂了,其实道理很简单; 就是利用vw,rem随屏幕,或者跟字体正比变化的特性; 1...
    会会会会阅读 43,141评论 16 40
  • 1、困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6...
    阿根廷斗牛阅读 1,288评论 0 3
  • 1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...
    _双眸阅读 70,524评论 13 51
  • clear 清空屏幕的内容 percent work directary pwd 查看我们所在的目录(位置),刚打...
    liang_1阅读 985评论 0 50