资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/关于移动端 rem 布局的一些总结

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

2shou / 989人阅读

摘要：所有权保留，请勿用于商业目的。年月日补充写过这篇博客之后，又陆续读过几篇关于布局的文章。移动开发在必要情况的下，可以适当使用来调整字体大小，但做成完全自适应则是一种存在问题的做法。

</>复制代码 
  1. 本文作者: 文蔺
    本文地址: http://www.wemlion.com/2015/a...
    本文由 @文蔺 创作，转载请保留此声明。 所有权保留，请勿用于商业目的。
【资源一】基础知识恕不回顾

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

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

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

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

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

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

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

</>复制代码 
  1. !function(win, lib) {
  2.     var timer,
  3.         doc     = win.document,
  4.         docElem = doc.documentElement,
  5.         vpMeta   = doc.querySelector("meta[name="viewport"]"),
  6.         flexMeta = doc.querySelector("meta[name="flexible"]"),
  7.  
  8.         dpr   = 0,
  9.         scale = 0,
  10.  
  11.         flexible = lib.flexible || (lib.flexible = {});
  12.  
  13.     // 设置了 viewport meta
  14.     if (vpMeta) {
  15.  
  16.         console.warn("将根据已有的meta标签来设置缩放比例");
  17.         var initial = vpMeta.getAttribute("content").match(/initial-scale=([d.]+)/);
  18.  
  19.         if (initial) {
  20.             scale = parseFloat(initial[1]); // 已设置的 initialScale
  21.             dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
  22.         }
  23.  
  24.     }
  25.     // 设置了 flexible Meta
  26.     else if (flexMeta) {
  27.         var flexMetaContent = flexMeta.getAttribute("content");
  28.         if (flexMetaContent) {
  29.  
  30.             var initial = flexMetaContent.match(/initial-dpr=([d.]+)/),
  31.                 maximum = flexMetaContent.match(/maximum-dpr=([d.]+)/);
  32.  
  33.             if (initial) {
  34.                 dpr = parseFloat(initial[1]);
  35.                 scale = parseFloat((1 / dpr).toFixed(2));
  36.             }
  37.  
  38.             if (maximum) {
  39.                 dpr = parseFloat(maximum[1]);
  40.                 scale = parseFloat((1 / dpr).toFixed(2));
  41.             }
  42.         }
  43.     }
  44.  
  45.     // viewport 或 flexible
  46.     // meta 均未设置
  47.     if (!dpr && !scale) {
  48.         // QST
  49.         // 这里的 第一句有什么用 ?
  50.         // 和 Android 有毛关系 ?
  51.         var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
  52.             _dpr = win.devicePixelRatio;
  53.  
  54.         // 所以这里似乎是将所有 Android 设备都设置为 1 了
  55.         dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
  56.                         ? 3
  57.                         : (_dpr >= 2 && (!dpr || dpr >= 2))
  58.                             ? 2
  59.                             : 1
  60.                   )
  61.                 : 1;
  62.  
  63.         scale = 1 / dpr;
  64.     }
  65.  
  66.     docElem.setAttribute("data-dpr", dpr);
  67.  
  68.     // 插入 viewport meta
  69.     if (!vpMeta) {
  70.         vpMeta = doc.createElement("meta");
  71.          
  72.         vpMeta.setAttribute("name", "viewport");
  73.         vpMeta.setAttribute("content",
  74.             "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
  75.  
  76.         if (docElem.firstElementChild) {
  77.             docElem.firstElementChild.appendChild(vpMeta)
  78.         } else {
  79.             var div = doc.createElement("div");
  80.             div.appendChild(vpMeta);
  81.             doc.write(div.innerHTML);
  82.         }
  83.     }
  84.  
  85.     function setFontSize() {
  86.         var winWidth = docElem.getBoundingClientRect().width;
  87.  
  88.         if (winWidth / dpr > 540) {
  89.             (winWidth = 540 * dpr);
  90.         }
  91.  
  92.         // 根节点 fontSize 根据宽度决定
  93.         var baseSize = winWidth / 10;
  94.  
  95.         docElem.style.fontSize = baseSize + "px";
  96.         flexible.rem = win.rem = baseSize;
  97.     }
  98.  
  99.     // 调整窗口时重置
  100.     win.addEventListener("resize", function() {
  101.         clearTimeout(timer);
  102.         timer = setTimeout(setFontSize, 300);
  103.     }, false);
  104.  
  105.      
  106.     // 这一段是我自己加的
  107.     // orientationchange 时也需要重算下吧
  108.     win.addEventListener("orientationchange", function() {
  109.         clearTimeout(timer);
  110.         timer = setTimeout(setFontSize, 300);
  111.     }, false);
  112.  
  113.  
  114.     // pageshow
  115.     // keyword: 倒退 缓存相关
  116.     win.addEventListener("pageshow", function(e) {
  117.         if (e.persisted) {
  118.             clearTimeout(timer);
  119.             timer = setTimeout(setFontSize, 300);
  120.         }
  121.     }, false);
  122.  
  123.     // 设置基准字体
  124.     if ("complete" === doc.readyState) {
  125.         doc.body.style.fontSize = 12 * dpr + "px";
  126.     } else {
  127.         doc.addEventListener("DOMContentLoaded", function() {
  128.             doc.body.style.fontSize = 12 * dpr + "px";
  129.         }, false);
  130.     }
  131.   
  132.     setFontSize();
  133.  
  134.     flexible.dpr = win.dpr = dpr;
  135.  
  136.     flexible.refreshRem = setFontSize;
  137.  
  138.     flexible.rem2px = function(d) {
  139.         var c = parseFloat(d) * this.rem;
  140.         if ("string" == typeof d && d.match(/rem$/)) {
  141.             c += "px";
  142.         }
  143.         return c;
  144.     };
  145.  
  146.     flexible.px2rem = function(d) {
  147.         var c = parseFloat(d) / this.rem;
  148.          
  149.         if ("string" == typeof d && d.match(/px$/)) {
  150.             c += "rem";
  151.         }
  152.         return c;
  153.     }
  154. }(window, window.lib || (window.lib = {}));

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

因此，这句在iPhone4上得出的结果是640：

</>复制代码 
  1. var winWidth = docElem.getBoundingClientRect().width;

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

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

使用js动态计算：

</>复制代码 
  1. !(function(doc, win) {
  2.     var docEle = doc.documentElement,
  3.         evt = "onorientationchange" in window ? "orientationchange" : "resize",
  4.         fn = function() {
  5.             var width = docEle.clientWidth;
  6.             width && (docEle.style.fontSize = 20 * (width / 320) + "px");
  7.         };
  8.      
  9.     win.addEventListener(evt, fn, false);
  10.     doc.addEventListener("DOMContentLoaded", fn, false);
  11.  
  12. }(document, window));
【资源四】媒体查询较密集的断点

使用css3 media query 实现

</>复制代码 
  1. @media screen and (min-width: 320px) {
  2.     html {font-size: 14px;}
  3. }
  4.  
  5. @media screen and (min-width: 360px) {
  6.     html {font-size: 16px;}
  7. }
  8.  
  9. @media screen and (min-width: 400px) {
  10.     html {font-size: 18px;}
  11. }
  12.  
  13. @media screen and (min-width: 440px) {
  14.     html {font-size: 20px;}
  15. }
  16.  
  17. @media screen and (min-width: 480px) {
  18.     html {font-size: 22px;}
  19. }
  20.  
  21. @media screen and (min-width: 640px) {
  22.     html {font-size: 28px;}
  23. }
【资源五】强大的单位——vw

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

</>复制代码 
  1. html {
  2.     font-size: 31.25vw; /* 表达式：100*100vw/320 */
  3. }

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

</>复制代码 
  1. @media screen and (min-width: 320px) {
  2.     html {
  3.         font-size: 100px;
  4.     }
  5. }
  6.  
  7. @media screen and (min-width: 360px) {
  8.     html {
  9.         font-size: 112.5px;
  10.     }
  11. }
  12.  
  13. @media screen and (min-width: 400px) {
  14.     html {
  15.         font-size: 125px;
  16.     }
  17. }
  18.  
  19. @media screen and (min-width: 440px) {
  20.     html {
  21.         font-size: 137.5px;
  22.     }
  23. }
  24.  
  25. @media screen and (min-width: 480px) {
  26.     html {
  27.         font-size: 150px;
  28.     }
  29. }
  30.  
  31. @media screen and (min-width: 640px) {
  32.     html {
  33.         font-size: 200px;
  34.     }
  35. }
  36.  
  37. html {
  38.     font-size: 31.25vw;
  39. }
【总结】

对以上种种方法的综合：

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

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

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

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

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

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

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

</>复制代码 
  1. @media screen and (min-width: 320px) {
  2.     html {
  3.         font-size: 50px;
  4.     }
  5. }
  6.  
  7. @media screen and (min-width: 360px) {
  8.     html {
  9.         font-size: 56px;
  10.     }
  11. }
  12.  
  13. @media screen and (min-width: 400px) {
  14.     html {
  15.         font-size: 63px;
  16.     }
  17. }
  18.  
  19. @media screen and (min-width: 440px) {
  20.     html {
  21.         font-size: 69px;
  22.     }
  23. }
  24.  
  25. @media screen and (min-width: 480px) {
  26.     html {
  27.         font-size: 75px;
  28.     }
  29. }
  30. /**
  31.  * 2016-01-13 订正
  32.  * 做适当限制
  33.  * 大于640的屏幕 固定为100px
  34.  * 同时需要对body或者最外层wrapper做max-width: 640px的限制
  35.  */
  36. /*
  37. @media screen and (min-width: 640px) {
  38.     html {
  39.         font-size: 100px;
  40.     }
  41. }
  42. html {
  43.     font-size: 15.625vw;
  44. }
  45. */
  46. html {
  47.     font-size: 15.625vw;
  48. }
  49. @media screen and (min-width: 640px) {
  50.     html {
  51.         font-size: 100px;
  52.     }
  53. }

【方法二】脚本动态计算

大前提：

1、initial-scale 为 1；

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

</>复制代码 
  1. /* css */
  2. html {font-size: 50px;}
</>复制代码 
  1. /* javascript */
  2. !(function(win, doc){
  3.     function setFontSize() {
  4.         // 获取window 宽度
  5.         // zepto实现 $(window).width()就是这么干的
  6.         var winWidth =  window.innerWidth;
  7.         // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + "px" ;
  8.         
  9.         // 2016-01-13 订正
  10.         // 640宽度以上进行限制 需要css进行配合
  11.         var size = (winWidth / 640) * 100;
  12.         doc.documentElement.style.fontSize = (size < 100 ? size : 100) + "px" ;
  13.     }
  14.  
  15.     var evt = "onorientationchange" in win ? "orientationchange" : "resize";
  16.     
  17.     var timer = null;
  18.  
  19.     win.addEventListener(evt, function () {
  20.         clearTimeout(timer);
  21.  
  22.         timer = setTimeout(setFontSize, 300);
  23.     }, false);
  24.     
  25.     win.addEventListener("pageshow", function(e) {
  26.         if (e.persisted) {
  27.             clearTimeout(timer);
  28.  
  29.             timer = setTimeout(setFontSize, 300);
  30.         }
  31.     }, false);
  32.  
  33.     // 初始化
  34.     setFontSize();
  35.  
  36. }(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:

https://madebymike.com.au/wri...

https://medium.com/@jakobud/c...

http://www.w3cplus.com/css/cs...

云服务器 GPU云服务器 移动端布局 vps日常维护中的一些要点总结 web移动端布局 rem布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85955.html

相关文章

  • rem, vw, 还是...? 各凭本事的移动端适配方案

    摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。 前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再...

    wangbinke 评论0 收藏0

  • rem, vw, 还是...? 各凭本事的移动端适配方案

    摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。 前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再...

    tianren124 评论0 收藏0

  • 移动端web app自适应布局探索与总结

    摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题 在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

    Benedict Evans 评论0 收藏0

  • 移动端web app自适应布局探索与总结

    摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题 在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

    wangjuntytl 评论0 收藏0

  • Css-移动端适配总结

    摘要：这种使用简单，但是兼容性不太好。这种颜色有阴影，估计过不了设计大佬的那关。最后会把对应的编译出来，这种兼容性好，就是依赖于插件。这种兼容好，但是会和伪类冲突，也是我司采用的方式。 前言 工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcss pxdevice px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC端 本文主要...

    codeGoogle 评论0 收藏0

发表评论

登陆后可评论

0条评论

2shou

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<