## 首先我们应该遵循移动优先原则: 交互和设计应以移动端为主,PC则作为移动端的一个扩展; 一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。 ### **一、响应式布局** **1、Meta标签定义** 使用 viewport meta 标签在手机浏览器上控制布局 ``` <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> ``` 通过快捷方式打开时全屏显示 ``` <meta name="apple-mobile-web-app-capable" content="yes"> ``` 隐藏状态栏 ``` <meta name="apple-mobile-web-app-status-bar-style" content="blank"> ``` iPhone会将看起来像电话号码的数字添加电话连接,应当关闭 ``` <meta name="format-detection" content="telephone=no"> ``` **2、使用Media Queries适配对应样式** 常用于布局的CSS Media Queries有以下几种: **设备类型(media type):** all所有设备;   screen 电脑显示器;   print打印用纸或打印预览视图;   handheld便携设备;   tv电视机类型的设备;   speech语意和音频盒成器;   braille盲人用点字法触觉回馈设备;   embossed盲文打印机;   projection各种投影设备;   tty使用固定密度字母栅格的媒介,比如电传打字机和终端。 **设备特性(media feature):** width浏览器宽度; height浏览器高度; device-width设备屏幕分辨率的宽度值; device-height设备屏幕分辨率的高度值; orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape; aspect-ratio比例值,浏览器的纵横比; device-aspect-ratio比例值,屏幕的纵横比。 ``` /* for 240 px width screen */   @media only screen and (max-device-width:240px){    selector{ ... }   }   /* for 320px width screen */   @media only screen and (min-device-width:241px) and (max-device-width:320px){    selector{ ... }   }   /* for 480 px width screen */   @media only screen (min-device-width:321px)and (max-device-width:480px){    selector{ ... }   } ``` **3、表格(table)的响应式处理** 那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法: **(1)、隐藏不重要数据列** ``` @media only screen and (max-width: 800px) {    table td:nth-child(2),    table th:nth-child(2) {display: none;}   }   @media only screen and (max-width: 640px) {    table td:nth-child(4),    table th:nth-child(4),    table td:nth-child(7),    table th:nth-child(7),    table td:nth-child(8),    th:nth-child(8){display: none;}   } ``` **(2)、多列横向变2列纵向** 实现方法:定位隐藏,变块元素,并绑定对应列名,然后用伪元素的content:attr(data-th)实现: **(3)、固定首列,剩余列横向滚动** ``` thead {float:left;}  tbody {display:block;width:auto;overflow-x:auto;} ``` ### **二、响应式内容** **1、响应式图片** 带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。 处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320\*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过[http://screensiz.es/phone](http://screensiz.es/phone)查询。 **2、高分辨率(DPI)下的响应式处理** **3、高分辨率下的1px border**