移动 web 适配

一、移动 web 开发与适配

1、跑在手机端的 web 页面（H5 页面）

2、跨平台（PC 端、手机端 - 安卓、IOS）

3、基于 webview（终端开发技术的一个组件）

4、告别 IE 拥抱 webkit（移动端的手机 webview 基本上都是 wenkit 内核）

5、更高的适配和性能要求（手机屏幕尺寸复杂、网络状况复杂）

 

二、常见移动 web 适配方法

PC：

    960px/1000px 居中

    盒子模型、定高、定宽

    Display：inline-block

 

移动 web：

    定高、宽度百分比（百分比布局只能做一些很简单的屏幕适配，能适配的移动端布局方案很少）

    flex

    Media Query（媒体查询）

 

其中 flex 与 Media Query（媒体查询） 就可以实现响应式布局

 

Media Query（媒体查询）

使用方法1：

<style type="text/css">

      /* 屏幕最大 width 为 320px 时  即屏幕小于等于 320px 时  */
      @media screen and (max-width: 320px) { /* css */ }

      /* 屏幕最小 width 为 321px 时  即屏幕大于于等于 321px 时  */
      @media screen and (min-width: 321px) { /* css */ }

</style>

媒体类型：screen，print...        媒体特性：max-width，max-height...

使用方法2：

    <link rel="stylesheet" type="text/css" href="" media="screen and (max-width: 320px)">

 

响应式布局

即一套前端代码可以针对不同机型；比如 IPhone 和 iPad