Open riskers opened 8 years ago
注: 这篇文章部分内容已经过时,vw 方案(见文末)已经足以适应各种场合,且兼容性很好。
上一篇介绍了像素和视口这些基本概念,现在接着移动端的适配方案。
推荐一篇文章:MobileWeb适配总结,里面说到的三种布局方法已经说的很详细,还分别做了demo,我就不做了,这里说说三种方案的原理以及我使用中的感受,希望各为互补,大家理解是最重要的。
之前做过PC页面的人聊的最多的就是『兼容』,这是因为浏览器之间的差异引起的,不再多说。而移动端是基本没有『兼容』的问题的,全是CSS3,简直不要太开心。可是『适配』问题随之而来。
什么是『适配』?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px的。可是,当我们开始做移动端页面的时候,设计师给了一份宽度为640px的设计图。那么,我们把这份设计图实现在各个手机上的过程就是『适配』。
那么,我们怎么开始呢?目前有三种方法:
这三种方法的核心都是视口的确定,现在以实现这个设计图为例说明。
demo
这也是目前使用最多的方法,垂直方向用定值,水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。
随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。
原理
这种方法使用了完美视口:
<meta name="viewport" content="width=device-width,initial-scale=1">
这样设置之后,我们就可以不用管手机屏幕的尺寸进行开发了。
设计图、页面宽度、viewport width使用一个宽度,浏览器帮我们完成缩放。单位使用px即可。
目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。
这种方法需要根据屏幕宽度来动态生成viewport,生成的 viewport 基本是这样:
viewport
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
640 是我们根据设计图定下的,0.5 是根据屏幕宽度动态生成的。
生成的viewport告诉浏览器网页的布局视口使用 640px,然后把页面缩放成50%,这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。
这个gif图说明了一切:
这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。
rem
px
具体使用方法见使用Flexible实现手淘H5页面的终端适配
上文提供了sass和postcss的px2rem转换方法,我这里给出less的px2rem。因为less不支持函数,所以需要安装插件 less-plugin-functions ,然后就简单了:
px2rem
less-plugin-functions
.function{ .px2rem(@px,@base:72px){ return: @px / @base * 1rem; } }
这样使用:
div{ width: px2rem(100px); }
使用这个方法的库:
实际上做了这几件事情:
<html>
font-size
data-dpr
这么设置的好处是可以让不同设备的rem或px都显示一样的长度。
设置rem的意义在于得到一个与屏幕宽度相关的单位,本来vw是最合适的,但是因为兼容性的问题,只能使用rem来做。这样,让不同设备的rem显示一样的长度。
vw
vw是CSS3引入的单位,1vw = 1%窗口宽度
上面的布局我们可以这样:
html{ font-size: 屏幕宽度 / 10; } .btn{ width:8.75rem; height:1.25rem; }
这样,无论屏幕宽度是多少,.btn都是相对于屏幕的这么宽,做到了适配。
.btn
这两个设置其实是干的一件事,就是适配高密度屏幕手机的px单位。
.a{ font-size:12px; } [data-dpr="2"] .a{ font-size: 24px; } [data-dpr="3"] .a{ font-size: 36px; }
而缩放是动态的,这样,不同设备下的px显示一样的长度。
之前说过CSS像素和物理像素与缩放、dpr都有关系,这里说明:
在普通手机上,.a字体设置为12px; 在dpr是2的手机上,[data-dpr="2"] .a字体为24px,又因为页面缩放50%,字体为还是12px
在普通手机上,.a字体设置为12px;
.a
在dpr是2的手机上,[data-dpr="2"] .a字体为24px,又因为页面缩放50%,字体为还是12px
[data-dpr="2"] .a
坦白说,我不觉得第一种方案能就称为『适配』方案,因为太笨了,只能做一些列表等简单排列的样式。
但是一些复杂的活动页的布局,用它可能就力不从心了:
这是我曾经做过的一个页面,『PK』要和左右两张图平行,而且下面的『不怒自威』、『义薄云天』和下面的战斗力位置都要固定,不能有差。如果用第一种方案,可能各个元素就要绝对定位,然后各种百分比来定位了。且不说计算麻烦,而且辛苦一番最后的结果尺寸是和设计图有出入的。
但是,第二种和第三种方案就绝对不会有这种情况,不会和设计图有差。再说第二种和第三种方案的区别,目前我唯一知道的区别就是第三种方案更加灵活,有两种单位可以使用,想让元素适配的时候就用rem,想让文字不缩放的时候就用px。
如果你没有明白我以上讲的,可能是我太啰嗦了,你可以看看下面的那些文章。当然,最好的理解方式就是用这些方案做几个页面,到时候就明白了。
其他文章
这两篇文章看着简单,尤其是上一篇讲视口,花费了将近一周的时间去翻阅资料。本来以为很简单的东西,才发现有那么多名堂。好了,后天年会,祝我中大奖吧。
PPT
vw方案: https://www.w3cplus.com/css/vw-for-layout.html
demo: http://huodong.m.taobao.com/act/layouttestvw.html
只要明白 CSS 的 vw 单位是什么意思就明白这个方案了,可以看作是第三种方案的完美版,先定死 viewport,再通过 vw 取代 rem。
向我捐助 | 关于我 | 工作机会
本来vw是最合适的,但是因为兼容性的问题,只能使用rem来做
请问具体是什么兼容问题
@September-9 当时很多安卓机不支持 vw ,现在不存在了。查看 20170821 更新的方案
上一篇介绍了像素和视口这些基本概念,现在接着移动端的适配方案。
之前做过PC页面的人聊的最多的就是『兼容』,这是因为浏览器之间的差异引起的,不再多说。而移动端是基本没有『兼容』的问题的,全是CSS3,简直不要太开心。可是『适配』问题随之而来。
什么是『适配』?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px的。可是,当我们开始做移动端页面的时候,设计师给了一份宽度为640px的设计图。那么,我们把这份设计图实现在各个手机上的过程就是『适配』。
那么,我们怎么开始呢?目前有三种方法:
这三种方法的核心都是视口的确定,现在以实现这个设计图为例说明。
固定高度,宽度自适应
demo
这也是目前使用最多的方法,垂直方向用定值,水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。
随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。
原理
这种方法使用了完美视口:
这样设置之后,我们就可以不用管手机屏幕的尺寸进行开发了。
固定宽度,viewport缩放
demo
设计图、页面宽度、viewport width使用一个宽度,浏览器帮我们完成缩放。单位使用px即可。
目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。
原理
这种方法需要根据屏幕宽度来动态生成
viewport
,生成的 viewport 基本是这样:640 是我们根据设计图定下的,0.5 是根据屏幕宽度动态生成的。
生成的viewport告诉浏览器网页的布局视口使用 640px,然后把页面缩放成50%,这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。
这个gif图说明了一切:
rem做宽度,viewport缩放
demo
这也是淘宝使用的方案,根据屏幕宽度设定
rem
值,需要适配的元素都使用rem
为单位,不需要适配的元素还是使用px
为单位。具体使用方法见使用Flexible实现手淘H5页面的终端适配
上文提供了sass和postcss的px2rem转换方法,我这里给出less的
px2rem
。因为less不支持函数,所以需要安装插件less-plugin-functions
,然后就简单了:这样使用:
使用这个方法的库:
原理
实际上做了这几件事情:
rem
的大小,即给<html>
设置font-size
<html>
设置data-dpr
这么设置的好处是可以让不同设备的
rem
或px
都显示一样的长度。设置rem
设置rem的意义在于得到一个与屏幕宽度相关的单位,本来
vw
是最合适的,但是因为兼容性的问题,只能使用rem
来做。这样,让不同设备的rem
显示一样的长度。上面的布局我们可以这样:
这样,无论屏幕宽度是多少,
.btn
都是相对于屏幕的这么宽,做到了适配。设置 viewport 缩放 和 data-dpr
这两个设置其实是干的一件事,就是适配高密度屏幕手机的
px
单位。而缩放是动态的,这样,不同设备下的
px
显示一样的长度。之前说过CSS像素和物理像素与缩放、dpr都有关系,这里说明:
总结
坦白说,我不觉得第一种方案能就称为『适配』方案,因为太笨了,只能做一些列表等简单排列的样式。
但是一些复杂的活动页的布局,用它可能就力不从心了:
这是我曾经做过的一个页面,『PK』要和左右两张图平行,而且下面的『不怒自威』、『义薄云天』和下面的战斗力位置都要固定,不能有差。如果用第一种方案,可能各个元素就要绝对定位,然后各种百分比来定位了。且不说计算麻烦,而且辛苦一番最后的结果尺寸是和设计图有出入的。
但是,第二种和第三种方案就绝对不会有这种情况,不会和设计图有差。再说第二种和第三种方案的区别,目前我唯一知道的区别就是第三种方案更加灵活,有两种单位可以使用,想让元素适配的时候就用
rem
,想让文字不缩放的时候就用px
。如果你没有明白我以上讲的,可能是我太啰嗦了,你可以看看下面的那些文章。当然,最好的理解方式就是用这些方案做几个页面,到时候就明白了。
其他文章
这两篇文章看着简单,尤其是上一篇讲视口,花费了将近一周的时间去翻阅资料。本来以为很简单的东西,才发现有那么多名堂。好了,后天年会,祝我中大奖吧。
PPT
20170821 update
vw方案: https://www.w3cplus.com/css/vw-for-layout.html
demo: http://huodong.m.taobao.com/act/layouttestvw.html
只要明白 CSS 的
vw
单位是什么意思就明白这个方案了,可以看作是第三种方案的完美版,先定死 viewport,再通过 vw 取代 rem。