<!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. hashable

    Glossary — Python 3.6.5 documentation https://docs.python.org/3/glossary.html?highlight=equal hashab ...

  2. win10 tortoiseSVN文件夹及文件图标不显示解决方法

    对于SVN来说,因为每个图标都代表着不同的含义,预示着不同的状态,是指示灯的作用,如果没有正确的图标很可能造成数据的丢失等. 输入:win+R,输入regedit,调出注册表信息,按下Ctrl+F,在 ...

  3. camera摄像原理之四：曝光和GAMMA

    GAMMA:输出/输入(光信号值) 从最明亮到最黑暗,假设人眼能够看到一定的范围,那么胶片(或CCD 等电子感光器件)所能表现的远比人眼看到的范围小的多,而这个有限的范围就是感光宽容度. 人眼的感光宽 ...

  4. unbantu安装mysql

    1,方法一 sudo apt-get install mysql-server apt isntall mysql-client apt install libmysqlclient-dev(暂不知用 ...

  5. Android沉浸式状态栏(透明状态栏)最佳实现

    Android沉浸式状态栏(透明状态栏)最佳实现 在Android4.4之前,我们的应用没法改变手机的状态栏颜色,当我们打开应用时,会出现上图中左侧的画面,在屏幕的顶部有一条黑色的状态栏,和应用的风格 ...

  6. 并不对劲的DFT

    FFT是一个很多人选择背诵全文的算法. #include<algorithm> #include<cmath> #include<complex> #include ...

  7. WebDriverWait显示等待

    等待页面加载完成,找到某个条件发生后再继续执行后续代码,如果超过设置时间检测不到则抛出异常 WebDriverWait(driver, timeout, poll_frequency=0.5, ign ...

  8. Macaca框架

    收藏 http://www.cnblogs.com/jinjiangongzuoshi/p/6537795.html

  9. ContextLoaderListener与RequestContextListener配置问题

    转自:https://blog.csdn.net/yyqhwr/article/details/83381447 SSH2.SSM等web应用开发框架的配置过程中,因为都要用到spring,所以,往往 ...

  10. 从事UNIX/LInux服务器编程最方便的代码编译工具------(eclipse for c/c++)、(FileZilla)、(Secure CRT) 这三种一定要一起使用 之1

    今天主要是将前几天搞的Linux学习的心得写出来,希望帮助更多的人进行,方便从事Unix和Linux编程的同行和刚入门者.主要介绍三种工具并给出安装过程,请大家不必怀疑这个博文,此博文是我自己原创.请 ...