<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            ! function(e) {

                function t(a) {

                    if(i[a]) return i[a].exports;

                    var n = i[a] = {

                        exports: {},

                        id: a,

                        loaded: !

                    };

                    return e[a].call(n.exports, n, n.exports, t), n.loaded = !, n.exports

                }

                var i = {};

                return t.m = e, t.c = i, t.p = "", t()

            }([function(e, t) {

                "use strict";

                Object.defineProperty(t, "__esModule", {

                    value: !

                });

                var i = window;

                t["default"] = i.flex = function(e, t) {

                    var a = e || ,

                        n = t || ,

                        r = i.document,

                        o = navigator.userAgent,

                        d = o.match(/Android[\S\s]+AppleWebkit\/(\d{})/i),

                        l = o.match(/U3\/((\d+|\.){,})/i),

                        c = l && parseInt(l[].split(".").join(""), ) >= ,

                        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),

                        s = i.devicePixelRatio || ;

                    p || d && d[] >  || c || (s = );

                    var u =  / s,

                        m = r.querySelector('meta[name="viewport"]');

                    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"

                }, e.exports = t["default"]

            }]);

            flex(, );

        </script>

    </head>

    <body>

    </body>

</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. YTU 2572: 猜灯谜

    2572: 猜灯谜 时间限制: 1 Sec  内存限制: 128 MB 提交: 154  解决: 91 题目描述 A 村的元宵节灯会上有一迷题: 请猜谜 * 请猜谜 = 请边赏灯边猜 小明想,一定是每 ...

  2. YTU 2945: 编程：五元向量的运算

    2945: 编程:五元向量的运算 时间限制: 1 Sec  内存限制: 128 MB 提交: 151  解决: 85 题目描述 用习惯了的运算符操作新定义的类对象,这是OO方法给我们带来的便利.下面要 ...

  3. eclipse svn修改用户名密码

    1,svn客户端删除 2,eclipse 补充,上图为网友资料,但实际操作过程中,发现eclipse中svn为svnkit,但相应目录下无.keyring文件,最后按步骤2删除auth下所有文件,再次 ...

  4. 【基于libRTMP的流媒体直播之 AAC、H264 推送】

    这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...

  5. Java-Runoob-高级教程-实例-字符串：07. Java 实例 - 字符串分割

    ylbtech-Java-Runoob-高级教程-实例-字符串:07. Java 实例 - 字符串分割 1.返回顶部 1. Java 实例 - 字符串分割  Java 实例 以下实例使用了 split ...

  6. word-break word-wrap

    work-break:break-all CJK超出的部分自动换行 word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前 ...

  7. bzoj1756

    1756: Vijos1083 小白逛公园 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1150  Solved: 371[Submit][Statu ...

  8. （转）理解POCO

    POCO的概念是从java的POJO借用而来,而两者的含义是一致的,不同的仅仅是使用的语言不一样.所以POCO的解释就是“Plain Old C# Object”. 从字面上翻译为“纯洁老式的C#对象 ...

  9. 全排列（传统&&黑科技）

    近期几次考试的一些题目暴力分都有用到全排列. 全排列是个好东西啊... 回想一下,我们最开始学到全排列是什么时候呢? 大概是学搜索的时候罢... 一.传统搜索算法 想复习可以戳 https://www ...

  10. spring-retry简单demo（附完整代码）

    重试 最近项目要用到重试.开始想自己写,后来想用RetryTemplate,最后想到既然项目用了springboot,还是直接集成spring-retry把. 代码 Application packa ...