关于移动端 rem 布局的一些总结

时间  2019-11-07
标签 关于 移动 rem 布局 一些 总结 栏目 无线 繁體版
原文   原文链接

本文做者: 文蔺
本文地址: http://www.wemlion.com/2015/a...
本文由 @文蔺 创做，转载请保留此声明。 全部权保留，请勿用于商业目的。javascript

【资源一】基础知识恕不回顾

基础知识参考如下两篇博客：css

http://isux.tencent.com/web-a...html

http://www.w3cplus.com/css3/d...前端

【资源二】淘宝m站首页的动态实现

学习http://m.taobao.com 首页的实现。html5

最近读到@大漠的新文章《使用Flexible实现手淘H5页面的终端适配》，和本部分有点关系。暂且加上来以供参考。（updated 2015-11-24）java

源码进行美化、解读以后，基本布局部分的代码已经被我还原出来了：（2016-01-13补充：后来才发现，早就开源在github上了）node

!function(win, lib) {
    var timer,
        doc     = win.document,
        docElem = doc.documentElement,

        vpMeta   = doc.querySelector('meta[name="viewport"]'),
        flexMeta = doc.querySelector('meta[name="flexible"]'),
 
        dpr   = 0,
        scale = 0,
 
        flexible = lib.flexible || (lib.flexible = {});
 
    // 设置了 viewport meta
    if (vpMeta) {
 
        console.warn("将根据已有的meta标签来设置缩放比例");
        var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
 
        if (initial) {
            scale = parseFloat(initial[1]); // 已设置的 initialScale
            dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
        }
 
    }
    // 设置了 flexible Meta
    else if (flexMeta) {
        var flexMetaContent = flexMeta.getAttribute("content");
        if (flexMetaContent) {
 
            var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
                maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
 
            if (initial) {
                dpr = parseFloat(initial[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
 
            if (maximum) {
                dpr = parseFloat(maximum[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }
 
    // viewport 或 flexible
    // meta 均未设置
    if (!dpr && !scale) {
        // QST
        // 这里的 第一句有什么用 ?
        // 和 Android 有毛关系 ?
        var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
            _dpr = win.devicePixelRatio;
 
        // 因此这里彷佛是将全部 Android 设备都设置为 1 了
        dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
                        ? 3
                        : (_dpr >= 2 && (!dpr || dpr >= 2))
                            ? 2
                            : 1
                  )
                : 1;
 
        scale = 1 / dpr;
    }
 
    docElem.setAttribute("data-dpr", dpr);
 
    // 插入 viewport meta
    if (!vpMeta) {
        vpMeta = doc.createElement("meta");
         
        vpMeta.setAttribute("name", "viewport");
        vpMeta.setAttribute("content",
            "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
 
        if (docElem.firstElementChild) {
            docElem.firstElementChild.appendChild(vpMeta)
        } else {
            var div = doc.createElement("div");
            div.appendChild(vpMeta);
            doc.write(div.innerHTML);
        }
    }
 
    function setFontSize() {
        var winWidth = docElem.getBoundingClientRect().width;
 
        if (winWidth / dpr > 540) {
            (winWidth = 540 * dpr);
        }
 
        // 根节点 fontSize 根据宽度决定
        var baseSize = winWidth / 10;
 
        docElem.style.fontSize = baseSize + "px";
        flexible.rem = win.rem = baseSize;
    }
 
    // 调整窗口时重置
    win.addEventListener("resize", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
     
    // 这一段是我本身加的
    // orientationchange 时也须要重算下吧
    win.addEventListener("orientationchange", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
 
    // pageshow
    // keyword: 倒退 缓存相关
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 设置基准字体
    if ("complete" === doc.readyState) {
        doc.body.style.fontSize = 12 * dpr + "px";
    } else {
        doc.addEventListener("DOMContentLoaded", function() {
            doc.body.style.fontSize = 12 * dpr + "px";
        }, false);
    }
  
    setFontSize();
 
    flexible.dpr = win.dpr = dpr;
 
    flexible.refreshRem = setFontSize;
 
    flexible.rem2px = function(d) {
        var c = parseFloat(d) * this.rem;
        if ("string" == typeof d && d.match(/rem$/)) {
            c += "px";
        }
        return c;
    };
 
    flexible.px2rem = function(d) {
        var c = parseFloat(d) / this.rem;
         
        if ("string" == typeof d && d.match(/px$/)) {
            c += "rem";
        }
        return c;
    }
}(window, window.lib || (window.lib = {}));

注意：
淘宝首页在iPhone4上设置的initial-scale是0.5（其余尺寸相似）。android

所以，这句在iPhone4上得出的结果是640：ios

var winWidth = docElem.getBoundingClientRect().width;

正是由于淘宝这种独特的设置，使得 ios 上 1px边框的问题完美解决（1px变2px， 又被 initial-scale=0.5 缩小了一半）。css3

【资源三】常规状况下js根据屏幕宽度动态计算

使用js动态计算：

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

【资源四】媒体查询较密集的断点

使用css3 media query 实现

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

【资源五】强大的单位——vw

使用单位 vw 实现动态计算。

html {
    font-size: 31.25vw; /* 表达式：100*100vw/320 */
}

不过考虑到国内兼容性的问题，仍是结合媒体查询来使用比较好。（媒体查询的断点暂时是借用上面的例子）

图片描述

@media screen and (min-width: 320px) {
    html {
        font-size: 100px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 112.5px;
    }
}
 
@media screen and (min-width: 400px) {
    html {
        font-size: 125px;
    }
}
 
@media screen and (min-width: 440px) {
    html {
        font-size: 137.5px;
    }
}
 
@media screen and (min-width: 480px) {
    html {
        font-size: 150px;
    }
}
 
@media screen and (min-width: 640px) {
    html {
        font-size: 200px;
    }
}
 
html {
    font-size: 31.25vw;
}

【总结】

对以上种种方法的综合：

一、meta:viewport, 仍是initial-scale为 1；

二、320px屏幕下，把页面根元素html的字体大小设置为50px；

三、鉴于咱们拿到的设计图目前是640px宽的基准，这样咱们就不用每次本身除以2了，直接在PS中量就好；

四、宽度什么的最好仍是用百分比处理；涉及到高度、字体大小之类的则用rem。

eg：
设计稿上，div高度为40px；那么css就是 div {height: 0.4rem;}

结果就只剩下一步转换：设计稿上量的长度转化为小数。 50% => 0.5 这种计算，不要太简单。。。

【方法一】纯粹css，支持calc函数的动态计算；不支持的用css媒体查询断点，优雅降级。

@media screen and (min-width: 320px) {
    html {
        font-size: 50px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 56px;
    }
}
 
@media screen and (min-width: 400px) {
    html {
        font-size: 63px;
    }
}
 
@media screen and (min-width: 440px) {
    html {
        font-size: 69px;
    }
}
 
@media screen and (min-width: 480px) {
    html {
        font-size: 75px;
    }
}

/**
 * 2016-01-13 订正
 * 作适当限制
 * 大于640的屏幕 固定为100px
 * 同时须要对body或者最外层wrapper作max-width: 640px的限制
 */
/*
@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
}

html {
    font-size: 15.625vw;
}
*/

html {
    font-size: 15.625vw;
}

@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
}

【方法二】脚本动态计算

大前提：

一、initial-scale 为 1；

二、在项目css中(注意不要被公共的base、common之类的影响了，资源加载顺序也是蛮重要的)，先把html的fontSize设置为 50px（或者加上媒体查询代码）, 避免加载未完成时候样式错乱;

/* css */
html {font-size: 50px;}
/* javascript */

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
        // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
        
        // 2016-01-13 订正
        // 640宽度以上进行限制 须要css进行配合
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document));

嗯。。。

就这么愉快地结束了。。。

不知道解读了某宝首页的一点点代码，而后发在这里，会不会有什么后果。。。

==================================================

2016年1月13日补充

写过这篇博客以后，又陆续读过几篇关于布局的文章。

具体已经忘了，大约是大漠的文章，还有一篇应该是搜车前端的博文，另外应该还有关于手淘首页的分析的文章。

另外，本身也用rem布局实践过几个项目。

不得不说，我的以为rem布局如今已经能够放弃了。flex布局已经很好用了，早已有之的百分比布局等稍用点心思也并不难。

这篇博客一直想改。但懒惰老是占据着个人身体。

最后再说下，字体大小自适应是错误的，字体大小自适应是错误的，字体大小自适应是错误的。

rem 布局，能够告别了。

迎接 flex 布局吧。

=========================================

写在最后

这篇博客写于半年前，那时候仍是个刚毕业的菜鸟。

偶尔有点想法，看了一些大牛的文章，有了这篇博客。

这也是半年来惟一一篇产出。

5k的浏览量，95收藏，13推荐，已经让我很惊讶了。

谢谢各路大神们的关注。

半年来感觉到的前端大环境变化仍是很大。虽然在公司没有太多变化，但眼睛总得看着世界吧。

接下来，还得继续学习。

因为手上没什么项目，一直想探索出一套本身的自动化流程，但到如今也只是积累了许多版的草稿。

nodejs方面也得有所探索，nodejs 再加上 shelljs 和 yargs 用起来是真的很爽。（鸣谢阮大神的文章）

算是年终总结了。在前端的路上继续走吧。

=========================================

一点想法：评论区的回复

媒体查询和js动态计算是两种方式。

首先，支持 CSS3 calc方法 和 rem、vw单位的浏览器下，只须要html {font-size: 15.625vw;}这样一句就好，另外加个媒体查询限制下。

以前的一大堆密集的断点只是为了hack不支持calc或者calc的状况。其次，js动态设置html的font-size，只要浏览器支持rem单位便可。

为何会考虑到密集的mq断点呢，由于当时还在考虑文字大小的自适应问题。

实践证实，字体大小自适应是一种错误的想法。

移动开发在必要状况的下，能够适当使用mq来调整字体大小，但作成彻底自适应则是一种存在问题的作法。

所以，这里提到的 calc和vh rem配合的作法，最好只用来作布局的工做。js动态计算也是相似，更适合作布局。

更新

Articles on responsive font:

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程