移动端页面适配的方案

说到css适配，必然会提到rem和@media这两个重要的属性。那么什么是rem呢？rem是一个相对长度单位。为什么要用它？那是因为它是 相对于根元素(html)font-size来计算的，只要我们改变了根元素的font-size的值 ，即可跟着改变。我们在开发的时候用到的单位都是px，那么必须得学会rem和px之前的转换：默认情况下，1rem是等于16px。很多时候我们为了方便，直接在把根元素设置成:html{font-size:10px}，这样1rem就等于10px了。那么可能就有人会问到：和我直接给px不是一样的吗，这和适配有半毛钱关系啊？确实，如果只是用rem，的确是做不了适配，所以接下来要介绍的是适配必不可少的@ media这个属性。

@media是css适配必不可少的重要属性，那@media是什么？它是媒介类型允许你定义以何种媒介来提交文档。那为什么要用它？它可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。那么应该如何使用这个@media这个属性呢？

举例：如果body宽度小于320px时则修改背景颜色为红色。

@media screen and (max-width: 320px) {
    body {
        background-color: red;
    }
}

以上的例子就是@media的最简单的基本用法了，大家应该也注意到了，这里的最大宽度最小宽度是可以自己定义的，那我们是不是可以利用它来设置不同尺寸下的不同颜色？答案是肯定de 。那我们就以iphone5/6和6puls为参考举例子，首先得知道它们对应的逻辑像素（ css像素）分别是320px、375px和414px（这个尺寸怎么来的？这里涉及到物理像素和 逻辑像素的问题，先暂时不讲）。

举例：我要iphone5/6和6puls手机上显示的颜色分别是红绿蓝这三个颜色

@media screen and (min-width: 320px){
    body {
        background-color:red;
    }
}
@media screen and (min-width: 375px){
    body {
        background-color:green;
    }
}
@media screen and (min-width: 414px){
    body {
        background-color:blue;
    }
}

这就是@media的用法了，也就是我们常说的媒体查询的用法。介绍到这里你们也应该知道了如何使用它和rem来做页面适配了吧？前面我们讲到，rem是 相对于根元素(html)font-size来计算的，所以说只要我们把上面那个例子body改成html，然后在里面设置字体大小就好了,那font-size怎么设置呢？假设设计稿尺寸为750px，因为750px的设计稿是以iphone6为参考设计的，所以我们要设置以375px为标准进行等比计算，适配方案为：1rem = 100px。

@media screen and (min-width: 320px) {
    html {
        font-size: 85.334px;
        /*320*100/375 = 85.33333333333333px;*/
    }
}
 
@media screen and (min-width: 375px) {
    html {
        font-size: 100px;
    }
}
 
@media screen and (min-width: 414px) {
    html {
        font-size: 110.4px;
        /*414*100/375 = 110.4px;*/
    }
}

适配方案已经写好了，那么怎么结合rem去使用呢？所以所有用到的单位都要换成了rem，比如宽、高、字体等等。例如盒子的宽度为20px，那直接设置那个盒子的宽度为0.2rem（20px/100px = 0.2rem）就ok了。这样我们在手机上看到的效果：iphone5是17.0668px、iphone6下是20px、iphone6puls是22.08px。这样就可以保证在不同尺寸下的iphone手机正常显示了，这就是我们所说的移动端页面适配了。当然我这里只是举例子，只写了iphone手机的适配方案而已，现在安卓机尺寸非常多，没有一定的标准，我们可以把区间写密一点以此来适配更多的机型。下面我给出一套以iphone6为标准的区间相对密一点的适配方案：1rem = 100px。

@media screen and (max-width: 319px) {
    html {
        font-size: 42.666665px;
    }
}
 
@media screen and (min-width: 320px) and (max-width: 359px) {
    html {
        font-size: 42.66666px;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {
    html {
        font-size: 48px;
    }
}
@media screen and (min-width: 375px) and (max-width: 383px) {
    html {
        font-size: 50px;
    }
}
@media screen and (min-width: 384px) and (max-width: 399px) {
    html {
        font-size: 51.2px;
    }
}
@media screen and (min-width: 400px) and (max-width: 413px) {
    html {
        font-size: 53.333335px;
    }
}
@media screen and (min-width: 414px) {
    html {
        font-size: 55.2px;
    }
}

可能有人就纳闷了，上面你不是说1rem= 100px吗,怎么给的适配方案变成了50px了？其实这个是个小技巧，因为设计师是以iphone6为参考标准放大一倍来设计的（以物理像素为单位制作设计稿），也就是说我们量到的宽度高度等等都要除以2的，比如量到高度是300px，那实际上它的高度只有150px而已，所以除以2才和实际高度相等。那我给的适配方案在适配的时候已经除2了，所以就和设计稿的尺寸保持一致了，我量到的尺寸不用再去除以2了，计算起来很方便。比如我量到的宽度是86px，那我直接给0.86rem就ok，不用再去除以2。

适配基本上讲得差不多了，呃，好像还少漏了什么？对，可能有些人会问道，为什么上面我设置的iphone5、6的像素是320px、375px和414px？这里就涉及到了物理像素和逻辑像素了。

1、物理像素

物理像素也可以称为设备像素，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

2、逻辑像素 

逻辑像素也可以称为CSS像素，CSS样式代码中使用的就是逻辑像素。

3、像素比 

物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

那我上边的设置像素就是属于逻辑像素了，那iphone5、6和6plus的物理像素、逻辑像素和像素比分别是多少?

1.iPhone5逻辑像素320×568，物理像素640×1136，像素比2:1

2.iPhone6 逻辑像素375×667， 物理像素750×1334，像素比2:1

3.iPhone6 Plus 逻辑像素414×736， 物理像素1242×2208，像素比3:1