<!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. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  2. mysql08---优化01

    Mysql数据库的优化技术 对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引(什么都不写).主键索引(有一个主键 ...

  3. Oracle - 数据更新 - 增删改

    /* 数据的更新 增加 删除 修改 */ -----------------------------------增加(一次只能插入一条数据) --自定义插入数据列的顺序 ,,); --按照数据库默认的 ...

  4. java web框架收集

    一.前端框架: 1.vue.js 2.angular.js 二.后端框架: 1.struts2 2.springmwc 三.数据库映射框架: 1.hibernate 2.mybatis 四.数据库: ...

  5. Ubuntu TFTP 服务

    /******************************************************************** * Ubuntu TFTP 服务 * 说明: * 在Ubun ...

  6. I.MX6 bq27441 GPOUT interrupt

    /******************************************************************** * I.MX6 bq27441 GPOUT interrup ...

  7. 洛谷 P1072 Hankson 的趣味题 —— 质因数分解

    题目:https://www.luogu.org/problemnew/show/P1072 满足条件的数 x 一定是 a1 的倍数,b1 的因数,a0/a1 与 x/a1 互质,b1/b0 与 b1 ...

  8. 【192】PowerShell 相关知识

    默写说明: 查询别名所指的真实cmdlet命令. Get-Alias -name ls 查看可用的别名,可以通过 “ls alias:” 或者 “Get-Alias”. 查看所有以Remove打头的c ...

  9. ObjectInputStream与ObjectOutputStream类实现对象的存取

    1. ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 ...

  10. cardboard sdk for unity 系统分析 - 对像与类

    一.cardboard通过monobehavior派生的脚本组件与UNITY3D联系起来: 二.相关的类及其关系如下图: