前言
由于最近工作原因,需要开发移动端的网页,除了页面兼容性问题,就是页面适配了,在此分享下几种实践过的页面适配解决方案
首先我建议各位去看看之前写的一篇《移动web网页开发细节》,下面讲的都是默认已做好基本操作
当前比较常用的适配解决方式
宽高采用百分比
# 我们需要在页面底部有一层绝对定位
<style type='text/css'>
#container {
position: absolute;
-webkit-overflow-scrolling: touch; /* 在IOS设备上可以有缓动效果 */
overflow: auto;
top: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id='container'>
<!-- do something -->
</div>
</body>
如此操作,就可以在纵向使用百分比设置高度,因为在width和height都是相对于上一级已知宽高而言的,document是没有高度设置的,所以直接使用height是无效的
宽高以rem为单位
<style type='text/css'>
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}
</style>
rem是相对根元素字体大小的相对单位,也就是说会根据根元素(即html元素)的font-size属性而变化大小,同时配合CSS的媒体查询,我们可以方便地定制rem的值,从而达到屏幕大小不同,rem的值不同,有效帮助屏幕适配
视口缩放
<meta name="viewport" content="width=640,minimum-scale=0.7,maximum-scale=1.3,user-scalable=no" />
- 这是head中常见的一个meta标签,然而很多时候,大家只是用来限制用户的手动缩放,缺没有利用它来进行视口的匹配
- 淘宝的手机版网页就充分利用了视口的缩放特性,有兴趣可以去研究下
- 例如,我们编写的网页,常以640px的宽度作为开发标准,我们就设定视口宽度为640px,网页在移动端显示的时候,就会以640px的设备宽度显示网页,然而并不是所有移动设备都是640的宽度,我们为了友好的适配480px – 980px之间的设备
- 这里我们将视口的缩放设置成最小缩放0.7倍,最大缩放1.3倍
- 如此一来,浏览器会在显示网页的时候,以640px为基本视口宽度,在0.7 – 1.3倍的缩放空间内进行自适应,页面会被放大或者缩小,以此填满屏幕,在适度的试用下,该方案效果很好
- 不过切忌对网页进行大范围的缩放操作,因为如果视口被拉伸得太大,会让网页显示的效果变得模糊,就好比你把一张图放大,总会看到像素点
Flex布局
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便
在开发类似app功能的移动web时,个人建议尽量采用flex布局,会让最后的网页更容易接近app的效果,关于flex布局,可以参考阮一峰的博客Flex 布局教程,感觉写的很基础详细,在此不多做记录
合理搭配使用
实际使用中,对以上几种方案还是需要有一定取舍,切忌试图以一种方式解决到底,很多时候都是事倍功半
- 百分比还是建议在设置宽度时采用
- rem建议只针对字体大小使用
- 视口可以小范围缩放,达到对页面的精度适配
- 采用flex布局,有助于在移动app中维持页面的基本结构完整