移动web开发--页面布局

一、移动web开发与适配

1、跑在手机端的web页面

2、跨平台

3、基于webview

4、拥抱webkit

5、更高的适配和性能要求

常见适配方法：

1、定高、宽度百分比

2、flex                  响应式

3、媒体查询

Media Query（媒体查询）：

 @media 媒体类型 and （媒体特性）{

    /* css样式 */

}

媒体类型：screen、print 。。。

媒体特性：max-width、max-height 。。。 

<link media="媒体类型 and （媒体特性）">  此文件只针对该媒体特性的样式

rem原理：

字体单位：值根据HTML根元素大小而定，同样可以作为宽度，高度等单位。

适配原理：将px替换成rem，动态修改html的font-size适配。

兼容性：IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。