我们在开发移动端网页时,由于手机屏幕尺寸的不同,需要一些适配方案以达到界面自适应的效果,这里记录一下移动web开发的一些基本概念和常用适配方案,先了解一下视口的概念:

一、视口(viewport).

视口是指浏览器显示页面的区域范围,分为布局视口、视觉视口、理想视口.

1.布局视口:指当网页在移动端显示的时候,早期的做法,浏览器默认会把网页完全缩放到屏幕内,用户可以通过手势进行放大浏览,通常界面会缩放的很小,不便于浏览.

如图,20px大小的文本,在布局视口中,显示很小:

2.视觉视口:指浏览器的可视区域,和屏幕的尺寸大小成正比.

3.理想视口:相当于把布局视口的大小设定为移动端屏幕大小,不需要用户手动缩放调整就可以合适的浏览网页.

理想视口需要在head中通过meta标签实现:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

name="viewport"表示视口标签.

width=device-width设置视口宽度和设备屏幕宽度一致.

initial-scale=1.0初始尺寸比例

maxinum-scale=1.0最大尺寸比例

user-scalable=0是否支持用户缩放,1是0否

二、多倍图.

某些移动设备会使用retina视网膜技术,屏幕上的1像素由几个像素压缩而成,所以界面更加清晰.我们在开发的时候就要使用多倍图以适应这种技术,否则我们的图片会变得模糊.常用的有2倍图和3倍图.

三、移动端的技术选型.

大的方向分为两种:

1.分别单独开发pc和移动端界面.

这里指pc端和移动端写两套界面,常用的技术选型有:流式布局(百分比布局),flex弹性布局,less+rem+媒体查询布局,混合布局.

2.使用响应式技术适配移动端.

响应式布局是指网页会随着屏幕尺寸的大小不同而分别做不同的显示处理,常用的技术选型有:媒体查询,bootstarp.

这里推荐一个移动端使用的css初始化文件:

http://necolas.github.io/normalize.css/