<!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. 设计模式-（18）命令模式 （swift版）

    一,概念: 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这种情况下,如何将 ...

  3. MySql安装与使用图文教程

      2.下载完成后将其解压到你想要安装的路径下,例如我的解压到D:\MySql\mysql-5.7.12-winx64\路径下,刚解压完应该是下图这些文件夹:最好解压到根目录. 5.新建一个my.in ...

  4. Ubuntu系统下实现Android工程调用独立编译的C++程序和GMP、PBC库

    目的: 实现使用C++编写代码供Android工程调用.C++代码中可以使用STL库,也可以使用常用的由源码编译生成的库,如PBC.因为PBC是基于GMP库的,所以这里只记录了GMP和PBC库的编译安 ...

  5. 【CJOJ】Contest4 - A+B Series

    Position:http://oj.changjun.com.cn/contest.php?cid=4 A经典题目 // <A.cpp> - Sun Oct 9 15:28:01 201 ...

  6. LayUI table表格控件 如何显示 对象中的属性（针对Mybatis的级联查询--一对一情况）

    1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...

  7. Gym 100531B Buffcraft (贪心+暴力+前缀和)

    题意:给定两个加血的方式,一个是直接加多少,另一种是加百分之几,然后你能够你选 k 种,问你选哪 k 种. 析:首先肯定要选加的多的,所以我们先排序,从大到小,然后用前缀和存储一下,再去枚举从第一种和 ...

  8. codeforces 880E. Maximum Subsequence(折半搜索+双指针)

    E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input standa ...

  9. 百度地图API详细介绍

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  10. C++this详解

    以前对this指针误解挺多的,在这里单独写一篇进行总结,有不对之处,欢迎指正批评! 一.问题 1.一个类中的不同对象在调用自己的成员函数时,其实它们调用的是同一段函数代码,那么成员函数如何知道要访问哪 ...