前言
由于最近工作原因，需要开发移动端的网页，除了页面兼容性问题，就是页面适配了，在此分享下几种实践过的页面适配解决方案
首先我建议各位去看看之前写的一篇《移动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中维持页面的基本结构完整
网友评论