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

概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念&＃xff1a;为什么一定要为每个用户群各自打造一套设计和开发方案&＃xff1f;Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等&＃xff0c;它更像是一种对于设计的全新思维模式&＃xff1b;我们应当向下兼容、移动优先。

背景

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

移动端入口&＃xff1a;当用户希望通过手机来完成PC页的操作时&＃xff0c;常见的是商家的运营微博&＃xff0c;期文案足够吸引用户点击链接参加活动&＃xff0c;如果该活动页没做响应式处理&＃xff1a;页面体积大、请求多、体验差、兼容性差&＃xff0c;层层阻碍最终导致用户放弃参加。

优势 开发成本低&＃xff0c;门槛低

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


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

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

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


本地存储

Web App可以利用本地存储的特性将重要和重复的数据保存在本地&＃xff0c;避免页面的重复刷新&＃xff0c;减少重要信息在传输过程中被泄露&＃xff0c;增量传输修改内容。

无需安装成本&＃xff0c;迭代更新容易

responsive-web-design

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

实施

首先我们应该遵循移动优先原则&＃xff0c;交互&设计应以移动端为主&＃xff0c;PC则作为移动端的一个扩展&＃xff1b;一个页面需要兼容不同终端&＃xff0c;那么有两个关键点是我们需要去做到响应式的&＃xff1a;

响应式布局
响应式内容&＃xff08;图片、多媒体&＃xff09;


响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)&＃xff0c;怎样才能做到让一种设计方案满足所有情况&＃xff1f;

那么我们的布局应该是一种弹性的栅格布局&＃xff0c;不同尺寸下弹性适应&＃xff0c;如以下页面中各模块在不同尺寸下的位置&＃xff1a;

响应式布局

那么我们要怎么做&＃xff1f;

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

通过快捷方式打开时全屏显示

隐藏状态栏

iPhone会将看起来像电话号码的数字添加电话连接&＃xff0c;应当关闭

使用 Media Queries 适配对应样式

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
handheld便携设备
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介&＃xff0c;比如电传打字机和终端

设备特性(media feature):

width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向&＃xff0c;当窗口的高度值大于等于宽度时该特性值为portrait&＃xff0c;否则为landscape
aspect-ratio比例值&＃xff0c;浏览器的纵横比
device-aspect-ratio比例值&＃xff0c;屏幕的纵横比