你的位置:首页 > 网页设计

[网页设计]页面在移动端不同屏幕下自适应的尝试和心得之一


 

写在前面

现在手机发展迅猛,屏幕大小不一,在刚刚做手机端项目的时候,页面的自适应就成了一个难题。首先,使用px肯定是行不通的,那么我刚开始用的是em,但是随着项目的深入,em的缺陷就暴露无遗了,我总结有以下两点:

1.em单位基准值的确定及换算

em是相对长度单位。相对于当前对象内文本的字体尺寸。

上面是百度到的对em的定义,如果你没有对当前元素设置font-size属性,那么它就会默认继承其父级元素的font-size属性。可想而知,当html结构层层嵌套的时候,当前元素em的基准值是多少以及之后的换算会是一件很烦的事,工作效率很低。

2.em单位的基准是当前元素字体大小而非屏幕宽度

我们所谓的自适应,应当是根据设备屏幕宽度适应,而em单位归根究底,它的基准是当前元素字体大小,而不是屏幕的宽度。


 

rem的使用

那么很自然的,就学习到了使用rem这个单位。rem是css3中的一个新属性,官方对它的表述是“font size of the root element”。翻译过来就是相对根元素的字体大小的单位,和em相同,它也是一个相对单位,但和em不同的是,它是相对于根元素的。这个特性决定了,利用它可以使网页等比例适配所有屏幕,可以说是web app制作的利器。

关于rem其实用法有很多,但我在开始的时候使用了很愚蠢的一种,当时有这么一个项目,只要求移动端ios手机设备的适配。所以我就写了以下的一套media query

html {  font-size: 20px;}@media screen and (max-width: 320px) {  html {    font-size: 17px !important;  }}@media screen and (min-width: 414px) {  html {    font-size: 26.6667px !important;  }}  

当时的设计稿是750的,也就是基于iphone6设计的。我这种写法的缺点其实就一目了然了,首先,局限性很强,就是专门给ios手机做的。再一个,换算很累,rem值等于设计值除以40,工作效率可想而知。所以现在回头来看,确实比较蠢。。。于是我就去请教百度了。

我找到了网友流云诸葛的这一篇博客  从网易与淘宝的font-size思考前端设计稿与工作流

文章很好的总结了网易以及淘宝的一些做法,其中网易的做法,就可以比较好的解决我之前代码的两个缺点,代码如下:

// 根据不同设备的屏幕宽度,设置根元素font-size
// 以设计稿750宽为例
// 这样rem的值就等于设计稿值除以100
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

然后我又看到了淘宝的方案,它还给我们提供了一个开源的解决方案  github地址

淘宝的做法不光动态设置根元素font-size,还通过缩放viewport来达到效果。我后来去看了源码,觉得这套方案非常的不错,下一篇博客就准备讲一讲淘宝的这套方案。