移动端页面适配的方案

释放双眼,带上耳机,听听看~!
我们在做移动端页面 开发的时候,会涉及到适配的问题,如果不做适配的话,那你会发现,自己写的页面在不同的尺寸的手机下看到的效果似乎都不太'正常'。 那么要怎么做才能让自己写的页面可以在不同分辨率下正常显示呢?一般来说有两种适配方案: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逻辑像素320×568,物理像素640×1136,像素比2:1

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

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

内容投诉
前端开发

web开发调试中的跨域处理

2018-11-1 22:18:27

前端开发

使用用jquery做的弹幕特效

2018-11-5 10:28:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索