移动web页面适配

前言

由于最近工作原因，需要开发移动端的网页，除了页面兼容性问题，就是页面适配了，在此分享下几种实践过的页面适配解决方案
首先我建议各位去看看之前写的一篇《移动web网页开发细节》，下面讲的都是默认已做好基本操作

当前比较常用的适配解决方式

• 宽高采用百分比

# 我们需要在页面底部有一层绝对定位


        

               
        

如此操作，就可以在纵向使用百分比设置高度，因为在width和height都是相对于上一级已知宽高而言的，document是没有高度设置的，所以直接使用height是无效的

• 宽高以rem为单位

rem是相对根元素字体大小的相对单位，也就是说会根据根元素（即html元素）的font-size属性而变化大小，同时配合CSS的媒体查询，我们可以方便地定制rem的值，从而达到屏幕大小不同，rem的值不同，有效帮助屏幕适配

• 视口缩放

• 这是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中维持页面的基本结构完整