移动端页面适配的方案

  • 时间:2018-05-12
  • 浏览量:
  • 分类:[ html5+css3]
  • 作者:池剑锋

我们在做移动端页面开发的时候,会涉及到适配的问题,如果不做适配的话,那你会发现,自己写的页面在不同的尺寸的手机下看到的效果似乎都不太'正常'。 那么要怎么做才能让自己写的页面可以在不同分辨率下正常显示呢?一般来说有两种适配方案:1.js适配;2.css适配。在js适配里比较经典的例子是淘宝的flexible.js,有兴趣的朋友可以去查找相关资料了解下,在这里我主要讲css适配方案。

说到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逻辑像素320x568,物理像素640x1136,像素比2:1

2.iPhone6逻辑像素375x667,物理像素750x1334,像素比2:1

3.iPhone6 Plus逻辑像素414x736,物理像素1242x2208,像素比3:1


当然关于像素这块我这里讲得比较简单感兴趣的朋友可以去查看相关的资料学习。

看到这里你是否学会开发移动端页面了呢?动起手来吧。

这篇文章写得比较急促,如有疑问或者写的不对的地方,欢迎来吐槽。

上一篇:列表高度不一致的三种解决方法
下一篇:没有了
分享给好友