1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             ! function(e) {
  8.                 function t(a) {
  9.                     if(i[a]) return i[a].exports;
  10.                     var n = i[a] = {
  11.                         exports: {},
  12.                         id: a,
  13.                         loaded: !
  14.                     };
  15.                     return e[a].call(n.exports, n, n.exports, t), n.loaded = !, n.exports
  16.                 }
  17.                 var i = {};
  18.                 return t.m = e, t.c = i, t.p = "", t()
  19.             }([function(e, t) {
  20.                 "use strict";
  21.                 Object.defineProperty(t, "__esModule", {
  22.                     value: !
  23.                 });
  24.                 var i = window;
  25.                 t["default"] = i.flex = function(e, t) {
  26.                     var a = e || ,
  27.                         n = t || ,
  28.                         r = i.document,
  29.                         o = navigator.userAgent,
  30.                         d = o.match(/Android[\S\s]+AppleWebkit\/(\d{})/i),
  31.                         l = o.match(/U3\/((\d+|\.){,})/i),
  32.                         c = l && parseInt(l[].split(".").join(""), ) >= ,
  33.                         p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
  34.                         s = i.devicePixelRatio || ;
  35.                     p || d && d[] >  || c || (s = );
  36.                     var u =  / s,
  37.                         m = r.querySelector('meta[name="viewport"]');
  38.                     m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a /  * s * n + "px"
  39.                 }, e.exports = t["default"]
  40.             }]);
  41.             flex(, );
  42.         </script>
  43.     </head>
  44.     <body>
  45.     </body>
  46. </html>

注:不要手动设置viewport，该方案自动帮你设置！！！

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**。

有何优势

引用简单，布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
如何使用

重要的事情说三遍！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
看过 《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，
此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：

.myBtn {
　　　　width: 0.55rem;
　　　　height: 0.37rem;
}

出处链接：http://www.jianshu.com/p/985d26b40199

rem手机端页面自适应完美解决方案（最新）的更多相关文章

  1. rem手机端页面自适应布局（待修正下一篇完美布局）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  3. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  4. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  5. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  6. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  7. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  8. 移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

  9. 手机端页面自适应：rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

随机推荐

  1. Error setting property values; nested exception is org.springframework.beans.NotWritablePropertyExce

    Error setting property values ; nested exception is org.springframework.beans.NotWritablePropertyExc ...

  2. 交换分区 在dd命令执行期间 top 其消耗系统约14%的cpu，而mem占比约为0

    [资源不友好代码] from pyltp import * d_dir = '/usr/local/ltp_data_v3.4.0/' def gen_one_sentence_part(paragr ...

  3. （ros/moveit）cob_simulation報錯

    cob_simulation報錯 依照官網說明 http://wiki.ros.org/cob_bringup_sim 1. git clone https://github.com/ipa320/c ...

  4. 深度学习 dns tunnel检测 使用统计特征 全连接网络——精度99.8%

    代码如下: import numpy as np import tflearn from tflearn.layers.core import dropout from tflearn.layers. ...

  5. HubbleDotNet 开源全文搜索数据库项目--为数据库现有表或视图建立全文索引(三) 多表关联全文索引模式

    关系型数据库中,多表关联是很常见的事情,HubbleDotNet 可以对部分情况的多表关联形式建立关联的全文索引,这样用户就不需要专门建一个大表 来解决多表关联时的全文索引问题. 下面以 为数据库现有 ...

  6. 如何制作.a静态库?合成多架构静态库?

    08_01静态库 08_02制作静态库 .a 1.新建项目com+shift+n:选择Framework&Library. 2.下一步. 项目名不能为中文. 3.编写代码之后.用真机运行.会自 ...

  7. 2018OKR年中回顾 转

    一.2018OKR规划 目标1.温习专业基础知识 关键结果1.1 阅读<微积分之屠龙宝刀>+<微积分之倚天宝剑>,加深理解高等数学微积分的各种概念与公式(0.2 屠龙宝刀看了三 ...

  8. hdu 5289(单调队列)

    Assignment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  9. UI：归档、反归档、数据持久化

    支持的文件读写类型:字符串.数组.字典.NSdata  (可变的.不可变的.共有8个类) 对于数组.字典在写入文件时,其中的元素也必须是以上四种类型之一. 支持的数据类型有限.且简单 写入文件: 字符 ...

  10. Java Socket通信读取相关信息代码

    转自:http://developer.51cto.com/art/201003/190206.htm Java Socket通信读取有不少需要我们注意的知识点.当我们在使用的时候有很多的问题摆在我们 ...