<!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. Linq：int类型使用Contains方法

    获取的是前台传过来的String类型的值,例如:1,123,44,59 具体代码如下 if (!string.IsNullOrEmpty(str)) { string[] strArr = str.S ...

  2. 将最大主机/ DNS名称字符长度从63增加到255

    https://mp.weixin.qq.com/s/WcjaAgAOvEhjtP2nXx5Fhw Zabbix 4.0.0alpha8发行说明 运维帮 昨天 Zabbix团队很高兴地宣布Zabbix ...

  3. 内存转储文件 Memory.dmp

    https://baike.sogou.com/v63435711.htm?fromTitle=内存转存文件 内存转储是用于系统崩溃时,将内存中的数据转储保存在转储文件中,供给有关人员进行排错分析用途 ...

  4. CentOS 7.2 源码安装Python3.6

    1.环境 安装CentOS 7.2最小系统(CentOS-7-x86_64-Minimal-1511.iso) 2.需求 Python-3.6.4.tar.xz(官网下载) GCC(yum安装) 一堆 ...

  5. [Codeforces Round #461 (Div2)] 题解

    [比赛链接] http://codeforces.com/contest/922 [题解] Problem A. Cloning Toys          [算法] 当y = 0 ,   不可以 当 ...

  6. bzoj1046 [HAOI2007]上升序列——LIS

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1046 倒序求最长下降子序列,则得到了每个点开始的最长上升子序列: 然后贪心输出即可. 代码如 ...

  7. 字节流与字符流简单操作（OutputStream、InputStream、Writer、Reader）

    操作流程 使用File类打开一个文件 通过字节流或者字符流的子类.指定输出的位置. 进行读/写操作 关闭输入/出 字节流与字符流 在java.io包中操作文件内容主要有两大类:字节流字符流.两大类分为 ...

  8. HDU 5514 Frogs (数论容斥)

    题意:有n只青蛙,m个石头(围成圆圈).第i只青蛙每次只能条ai个石头,问最后所有青蛙跳过的石头的下标总和是多少? 析:首先可以知道的是第 i 只青蛙可以跳到 k * gcd(ai, m),然后我就计 ...

  9. Swift4 扩张(Extenstion), 集合(Set)

    创建: 2018/03/09 完成: 2018/03/10 更新: 2018/04/19 修改小标题  [扩张的定义与使用协议] -> [通过扩张来采用协议] 更新: 2018/09/18 标题 ...

  10. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...