蓝戒的博客


响应式web页面重构技术关键点

Sun-Nov-27-09-47-03

响应式Web设计,这个概念是Ethan Marctte 在A List Apart 发表的一篇文章“Responsive Web Design”中援引响应式建筑而得名:响应式建筑(responsive architecture),物理空间应该可以根据存在于其中的人的情况进行相应。

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

背景

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

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


优势
开发成本低,门槛低

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


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

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


本地存储

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


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

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


实施

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

  • 响应式布局
  • 响应式内容(图片、多媒体)


响应式布局

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

那么我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应。

总结出响应式页面的几个关键要点:

  • 1、页面头部的meta说明,可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应,也可以在这里设置页面的缩放比例等等,这样在成比例的分辨率设备下,就可以更简单地实现响应式。
  • 2、 流体布局(fluid grid),所谓的流体布局,其实就是在你pc端实现的页面基础上,将一些元素的宽高由原来的固定多少像素(px)调整为百分比(%)或字体比例(em) (或布局方面的margin、padding、left、top等以px为单位的值),这也是当前实现响应式布局的两种主要实现方法。

第一种用百分比(%),就是以该元素的父容器的宽高为100%,其他元素的宽高相对于其父容器的比例,只要将具体的像素值相对于他的父容器的一个百分比折算即可。

第二种方法是用字号比例(em)去实现,其实方法是跟上面一样的,只不过我们将%换成了em,这种方法就是某元素具体的宽高(px)在当前基准字号(font-size)下折算出多少个em。

  • 3、流体图片 (liquid image),在我所了解的很多资料中,对图片处理这块,如果要使图片能根据分辨率来适应,而且还不失真,好像挺困难的。但其实我们不用考虑的那么复杂, 我们要做的只是让图片能根据不同分辨率自适应罢了,我们不管图片会不会因为被拉伸而失真,因为真的遇到这样的情况,我们可以考虑在不同分辨率下使用不同的 图片,这样就简单多了。所以让图片尺寸自适应,我们只要不给图片设定具体的宽高尺寸,只要在样式中给该图片一个width:100%,这样图片就能根据它 父容器的尺寸自动调整了。

 

  • 4、媒体查询(media query),这个也是响应式页面的一个关键技术,根据不同的分辨率去调整一些不同的样式。

语法结构及用法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

在link中使用@media:<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>

上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

在样式表中内嵌@media:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

使用 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比例值,屏幕的纵横比

 

本文固定链接: http://www.webzsky.com/?p=291 | 蓝戒的博客

cywcd
该日志由 cywcd 于2014年11月23日发表在 html5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 响应式web页面重构技术关键点 | 蓝戒的博客

响应式web页面重构技术关键点:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×