重温"什么是响应式网页设计？响应式布局的实现原理"

概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为何必定要为每一个用户群各自打造一套设计和开发方案？Web设计应该作到根据不一样设备环境自动响应及调整。固然响应式Web设计不单单是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思惟模式；咱们应当向下兼容、移动优先。

背景

PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端的流量。

移动端入口：当用户但愿经过手机来完成PC页的操做时，常见的是商家的运营微博，期文案足够吸引用户点击连接参加活动，若是该活动页没作响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终致使用户放弃参加。

优点 开发成本低，门槛低

Native APP：Objective-C or Java – 学习成本高
Hybrid APP： 外壳+Web APP，需安装。
响应式Web APP：HTML5+JS+CSS – 门槛低，极易上手，迭代快

跨平台和终端且不须要分配子域

虽然可经过监测用户UA来判断用户终端后作跳转，但它仍是分配了多个域，而响应式无需监测用户UA没有域的切换，只需根据终端类型来适配不一样的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。

PC – http://qzone.com
Mobile – http://m.qzone.com
响应式：PC & Mobile – http://qzone.com 无需跳转

本地存储

Web App能够利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减小重要信息在传输过程当中被泄露，增量传输修改内容。

无需安装成本，迭代更新容易

responsive-web-design

更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

实施

首先咱们应该遵循移动优先原则，交互&设计应以移动端为主，PC则做为移动端的一个扩展；
一个页面须要兼容不一样终端，那么有两个关键点是咱们须要去作到响应式的：

响应式布局
响应式内容（图片、多媒体）

响应式布局

如咱们须要兼容不一样屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能作到让一种设计方案知足全部状况？

那么咱们的布局应该是一种弹性的栅格布局，不一样尺寸下弹性适应，如如下页面中各模块在不一样尺寸下的位置：

响应式布局

那么咱们要怎么作？

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" />

使用 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，不然为landscapeaspect-ratio比例值，浏览器的纵横比device-aspect-ratio比例值，屏幕的纵横比