首页 > 网页教程 > CSS > 什么是响应式网页设计?响应式布局的实现原理

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

时间:2013-09-15    来源:isux

概念

响应式网页设计最初是由 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则作为移动端的一个扩展;
一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:

  1. 响应式布局
  2. 响应式内容(图片、多媒体)

响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(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,否则为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{ ... }
}

适用于布局的 Media Queries 这里不做详述,可通过官方文档进一步了解
那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?
接下来我们来了解以下的几种针对表格响应式处理的方法:

隐藏不重要数据列

table
处理前

r7
处理后

实现方法:

@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;}
}

以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。

相关推荐
8个超棒的创建响应式网页设计框架推荐
Cikonss:基于CSS创建响应式的图标字体插件介绍
CSS与响应性设计的未来及改进设想
17款超棒的前端开发响应式开发框架推荐
10款提升工作效率的响应式页面设计工具推荐
14款响应式布局的前端开发框架推荐
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS网页布局有关中文排版的九个技巧
相对定位中奇数的宽和高导致IE6布局BUG
CSS的Z-index属性深度解剖
揭开CSS定位属性Position的神秘面纱
如何用CSS实现多个子框架居中?
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
CSS之固定布局、流动布局、弹性布局优缺点分析(上)
CSS之固定布局、流动布局、弹性布局优缺点分析(下)
CSS布局常见的十个BUG
10种导致CSS布局页面错乱的解决方法分享
CSS新手教程:学习CSS页面布局和加载流程
CSS创建复杂布局的利器—Flexible Box Model
CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
CSS水平居中/垂直居中的N个方法 前端开发必收藏
前端开发框架Bootstrap3.0新手入门学习系列教程
前端开发框架Bootstrap3.0学习教程之入门篇
WEB前端开发应该注意的问题8点(原创技巧)
网页前端开发:微博CSS3适用细节初探

分类导航

教程推荐

热门特效

热门教程