关于HTML5移动页面适配

前言

如今屏幕分辨率的范围已经从320px（iPhone）涵盖到2560px（大显示器）或者更高了。用户不单单在桌面电脑上浏览网站，用户如今使用移动电话，小的笔记本，平板设备（比如iPad）来访问互联网。所以传统的固定宽度设计不那么理想了。web设计需要有自适应能力。页面布局要可以自动的去适应所有的分辨率和设备。现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了

1. 移动设备尺寸及分辨率

下面我们来看看移动设备的分辨率

iPhone 界面尺寸：

| iPhone | iPhone6 Plus | iPhone6 | iPhone5s |
|:-|:-|:-|:-|
| 尺寸 | 5.5英寸 | 4.7英寸 | 4英寸 |
| 像素分辨率 | 1242*2208 px | 750*1334 px | 640*1136 px |

在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，通常设计图是 7501334*

iPad 界面尺寸：

| iPad | iPad 3-4-5-6-Air-Air2-mini2| iPad 1-2 | iPad Mini |
|:-|:-|:-|:-|
| 像素分辨率 | 2048×1536 px | 1024×768 px | 1024×768 px |

2. 目前移动端做适配几种常用方法：

2.1、CSS3媒体查询

采用CSS3媒体查询可以为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，


@media 媒体类型 and (视口特性阀值){ /* 媒体类型可以 all screen print 等*/
    // 满足条件的css样式代码
}

比如我们要为宽度大于375px的页面中的class="content"的元素设置样式，可以这样写，

@media screen and (min-width=375px) {
    .content { styles }
};

我们在使用Media的时候需要先设置Meta标签下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

标签中的几个参数解释：

width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

下面我们就来看看css3 Media具体的写法：

下面这段css，估计很多人在响应式的网站经常看到类似下面这段：


@media screen and (max-width: 960px){     
    body{         
        background: #000;     
    } 
}

这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS，这个应该没有太大疑问。

下面就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法：


/*页面小于960px的时候*/
@media screen and (max-device-width:960px){     
   html{         
       font-size: 80px;
   } 
}  

/*当尺寸大于960px时候 */
@media screen and (min-width:960px){     
   html{         
       font-size: 90px;
   } 
}   

/* 当页面宽度大于960px小于1200px的时候执行下面的CSS */
@media screen and (min-width:960px) and (max-width:1200px){     
   html{         
       font-size: 100px;  
   } 
}

在移动端适配上通常使用的就是上面的方法，在文章后面会介绍国内大厂的具体使用方法，认真往下看

@media媒体查询器的功能不止这三个功能，下面是media的一些参数用法解释：
h

width: 定义输出设备中的页面可见区域宽度。
height: 定义输出设备中的页面可见区域高度。
device-width: 定义输出设备的屏幕可见宽度。
device-height: 定义输出设备的屏幕可见高度。
orientation: 检测设备目前处于横向还是纵向状态。
aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如：aspect-ratio: 16/9)
device-aspect-ratio: 检测设备的宽度和高度的比例。
color: 检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）
color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome: 检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution: 检测屏幕或打印机的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)。 grid：检测输出的设备是网格的还是位图设备。

详细功能介绍可以点击查看

2.2、百分比适配

用百分比做适配的方法是子元素相对于父元素的百分之多少，比如父元素的宽度为100px;设置子元素的宽度可为60%;这时子元素的宽为60px;如父元素的宽度改为200px时，这时子元素的宽就是120px; 所以可将body默认宽度设置为屏幕宽度（PC中指的是浏览器宽度），子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

2.3、使用rem来做适配

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的

在说rem之前，我们来说说关于手机视口的概念，通常在前端开发领域，像素有两层含义：设备像素和css像素。

设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
css像素：这是一个抽象的像素概念，它是为web开发者创造的。

一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。

而在移动端中有三个视口，哪三个呢？

布局视口：移动端css布局的依据视口，即css布局会根据布局视口来计算。
可以通过以下JavaScript代码获取布局视口的宽度和高度：

document.documentElement.clientWidth
document.documentElement.clientHeight

视觉视口：用户看到的区域
理想视口：理想的布局视口

什么是rem ?

rem是相对尺寸单位，rem是将根节点html的font-size的值作为整个页面的基准尺寸，计算如下：

元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

比如默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。基于此，我们用rem来实现不同尺寸屏幕的自适应的方法就是：在页面载入开始时首先判断window的宽度Width（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width）），若假定屏幕宽度为750的，而不同宽度的屏幕处理的处理方法，为了能保证换算容易，需先为html设置一个合适的font-size，计算：100 / 750 = fontSize / Width, fontSize = Width / 750 * 100 = W / 7.5；

假设我们以iPhone6设计图尺寸为标准，在设计图的尺寸下设置一个font-size值为100px。
也就是说：750px宽的页面，我们设置100px的font-size值，那么页面的宽度换算为rem就等于 750 / 100 = 7.5rem。

3. 大厂的做法

下面我们来看看，大厂是怎么做的呢？

京东的web移动端(设计图是750*1334)


/*  京东 m.jd.com */

@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}

@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}

@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}

@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}

@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}

@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}

/* 
我们来看看怎么计算的

设计图中 尺寸40px盒子，我们可以看到在媒体查询中，iPhone6 的布局视口是375，即html的font-size为16px，
则计算为rem： 40/16 = 2.5 rem

*/

如下图：京东m端在iPhone下的状态

iPhone6

在图中可以看到 img设置的样式 width: 2.5rem; height: 2.5rem; 实际渲染出来的大小是 40*40
因为我们可以在css媒体查询中看到在iPhone6下的设置html的font-size为16px；计算就是： 40/16 = 2.5.

京东iPhone6

iPhone5

我们将其切换到iPhone5看看效果，如下图：
同样是刚才的图标在5下面大小是多少呢~ ，在5下font-size的值为13.65px, 来算算结果就是 2.5*13.65 = 34.125

京东iPhone5

网易新闻 web移动端 (设计图大小目前版本本人看不出来，我记得16年是750*1334)

注： vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。



/* 网易新闻 3g.163.com */


@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

body {
    font-family: PingFangSC-Regular,Microsoft YaHei,Helvetica;
    background: #f5f7f9
}

body,html a {
    color: #333
}

.hidden,.none {
    display: none!important
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px
    }

    html .wap-wrap {
        width: 768px;
        margin: 0 auto
    }
}

/* 
我们来看看怎么计算的

比如设计图中 尺寸117px盒子，我们可以看到在媒体查询中，iPhone6 html的font-size为50px，
则计算为rem： 117/50 = 2.34rem

*/

如下图：网易新闻在iPhone下的状态

iPhone6

在图中可以看到 img设置的样式 width: 2.34rem; 实际渲染出来宽的大小是 116.98
因为我们可以在css媒体查询中看到在iPhone6下的设置html的font-size为50px；计算就是： 116.98/50 = 2.3396.

废话：我记得16年看网易并不是使用媒体查询的

网易iPhone6

阿里的手机淘宝触屏版 (设计图是750*1334)


/* 阿里手机淘宝  h5.m.taobao.com */


!function(e, t) { 

    var n = t.documentElement,
        d = e.devicePixelRatio || 1; // 设备DPR

    function i() { 
        var e = n.clientWidth / 3.75; // iPhone 6 布局视口375
        n.style.fontSize = e + "px" 
    } 

    if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)}(),
        i(),
        e.addEventListener("resize", i), 
        e.addEventListener("pageshow", function(e) { e.persisted && i() }), d >= 2) { 

            var o = t.createElement("body"), a = t.createElement("div");
            a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o) 
    } 

}(window, document)

如下图是阿里手淘在iPhone6下的情况，在图中我们可以看到html的font-size为font-size: 100px;; 然后呢他们的样式都是在行内的，而且window resize的时候内容区域是不会变化的，需要重新渲染；

淘宝iPhone6

小米(设计图是720*1280)


//小米  m.com


!function(e){
    var t = e.document,
        n = t.documentElement,
        i = e.devicePixelRatio || 1,
        a = "orientationchange" in e ? "orientationchange" : "resize",
        d = function(){
            var e = n.getBoundingClientRect().width || 360; //  Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
            (1 == i || e > 720) && (e = 720), n.style.fontSize = e/7.2 + "px" // 小米就是6啊 设计图都是安卓 720*1280界面
        };

    n.setAttribute("data-dpr", i),
    t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t.readyState ||
    t.addEventListener("DOMContentLoaded", 
        function() { 
            setTimeout(d)
        }, !1)
    )

} (window)

下图是雷布斯的小米，小米设计图是根据5寸（安卓 7201280）设计的，在720手机中如图中icon的大小为 7276， html中font-size: 50px;，计算为72/50 = 1.44 rem

小米安卓