响应式网页设计

龙哥

概念

响应式网页设计最初是由 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 标签在手机浏览器上控制布局

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

隐藏状态栏

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

神飞:很多人常常使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染而不会自动缩放,用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1,这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以,请记住:如果你的网站不是响应式的,请不要使用initial-scale或者禁用缩放。

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

example:

/* 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;}
}

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

多列横向变2列纵向

table
处理前

responsive-table
处理后

实现方法:<thead>定位隐藏,<td>变块元素,并绑定对应<th>列名,然后用伪元素的content:attr(data-th)实现<th>

responsive-table

固定首列,剩余列横向滚动

table
处理前

responsive-table
处理后

实现原理:

thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}

栅格框架推荐

响应式图片

responsive-image

带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签<picture>,因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。

<picture>是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:

   

   
   
   
   
   

Accessible text

source: 一个图片源;media: 媒体查询,用于适配屏幕尺寸;srcset: 图片链接,1x适应普通屏,2x适应高清屏;<noscript/>: 当浏览器不支持脚本时的一个替代方案;<img/>: 初始图片;另外还有一个无障碍文本,类似<img/>alt属性。

<picture>目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill


    
    
    
    
    
    

其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片, 逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。

当然,在未来的 CSS Image Level 4 中已经实现了响应式图片的原生语法:image-set

 = image-set([ , ]* [  | ])
 = [  |  ] 
那么我们的响应式图片可以这样重写了

background-image:url(default.jpg);  /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */

注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。

当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探
以下是部分项目地址,感兴趣的可以了解下:

高分辨率(DPI)下的响应式处理

  1. SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美,在我大中华这是硬伤。
  2. Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。
  3. -webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)

JS检测:var retina = window.devicePixelRatio > 1;

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

高DPI媒体查询规则将在下一篇文章中做详解,敬请期待

高分辨率下的1px border

Retina

由于高清屏的特性,1px是由2x2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案

在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {

  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);
  }

}

demo

留给我们的思考

  • 响应式不只是技术的实现,它更像是一种对于设计的全新思维模式
  • 浏览的体验短期内还无法超越原生应用
  • 左手操作习惯的交互
  • Webapp的消息推送
  • 调用本地文件系统的能力弱
  • 响应式图片的解决方案
  • 对PC事件的兼容
  • WebAPP页面体积的响应式适配
  • 代码实现和内容可维护性之间的权衡
  • 控制设计开发成本

实用技巧

  • 点击区域不限于元素的视觉区域,便于用户点击。同时排版不受限制,可以达到原生App的视觉效果。
  • 气泡框可以减少页面跳转,适合消息提醒等微任务的处理。
  • 信息架构上越来越接近原生App,有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。
  • 识别更多的手势操作,如下拉刷新和右滑存档等平移手势。操作不必全部呈现在界面中,和平台操作保证一致。
  • 调用系统硬件,如重力感应等传感器、多媒体设备,不过在手机端还鲜有应用案例,离大规模应用还有一定的距离。

Tags: , , ,

龙哥
龙哥
前端技术
上一遍
下一遍
30,381
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. 单炒饭 says:

    好文章……

  2. 吖猩 says:

    说的很不错,让我对响应式设计的理解更深了

  3. 烛前 says:

    有些地方不太赞同:
    1、Webapp的消息推送 —— webapp我觉得与响应式设计的思想有些相悖,个人觉得响应式设计是为了节省成本同时应对一些功能较弱型的网站,而做成webapp则不可能通过简单的媒体查询等技术来追求应用对于各种设备的兼容。
    2、调用本地文件系统的能力弱 —— 这个是网站硬伤吧……

  4. 520UED says:

    这个前端技术必定成为未来WEB的趋势,抓紧学习,嘿嘿

  5. 好文章值得一看再看~

  6. 所谓的响应式web设计,就是通过最新的css3多媒体查询技术来完成网页在不同分辨率下的适应效果,所以该技术能够很好的运用到iphone,ipad等移动设备,能够响应的开源项目有bootstrap,渴切-响应css框架等,如果要支持ie6~ie8可以参考kr.js解决方案,提供响应布局的服务商有p2h.cn以及 http://xy.keqie.com

  7. kailee says:

    自己在搜集做响应式的时候搜集到了这篇文章,文章写得很好。而且该网站也是响应式设计,不过有一点瑕疵。当媒体查询max-width:959px;时,菜单栏设计成单击按钮弹出样式。按钮绑定的slideToggle效果存在的缺陷是:当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。导致窗口>960px时,菜单栏消失,浏览效果大打折扣。此处可用slideUp、slideDown再加上条件判断处理。

  8. 东汉末年 says:

    “移动优先”原则感觉不适用于所有类型的网站,移动端与PC端差别太大时,还是专门做个移动端吧。而且有些类型的网站用户主要是还PC端,移动端起辅助就可以了。

  9. zhiyi says:

    这个不错。现在也有很多响应式网页的参考模板了。

  10. Dolly says:

    "在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟"不算完美啦,比如不支持box-shadow的移动端浏览器就不支持,我还原1px用这个 initial-scale=0.5,是个坑啊

  11. 大镜子 says:

    好文,又接触到了响应式设计一些新的东西了,可否上些demo看下呢,对于文章中第二个表格响应有点不解

  12. setU says:

    移动端响应设计,果然非同小可!

  13. arm says:

    讲得很仔细,不错

  14. alan says:

    initial-scale=0.5 我也被这坑的不轻。。

  15. 000 says:

    写的很好

  16. 三刻钟 says:

    很不错的文章,学习了

  17. Andrew says:

    讲得真不错,现在很多人运用响应式,但是很少人做到这么精细,关于一些padding,margin。很少人会去对他们精细的像素点去做控制,一般就是肉眼看来可以就可以,关于高清屏,如苹果5那样的双倍高清屏,图片都直接用640px的,然后对320的屏幕进行自动压缩,细节考虑方面还是很少。

  18. Andrew says:

    说点什么吧

  19. 小誉 says:

    学习了,说的很全面。

  20. 八戒 says:

    学习了 支持下!!

  21. I likе thee vauable info you provide іn youг articles. Ӏ'll bookmark ʏour blog and check agɑіn heгe regularly.
    ӏ'm quit сertain I wіll learn plenty ߋf neա stuff right here!
    Beѕt of luck ffor tɦe next!

    mу weblog UAE companies email database

  22. Carrie says:

    受益匪浅

  23. 小甜 says:

    找了很多资料,这个确实干活,写的比较清晰明了,感谢分享

  24. It's really a great and helpful piece of information. I am satisfied that you just
    shared this useful information with us. Please keep us informed like this.
    Thanks for sharing.

  25. Hey! This post couldn't be written any better!

    Reading this post reminds me of my previous room mate!
    He always kept chatting about this. I will
    forward this post to him. Fairly certain he will have a good
    read. Many thanks for sharing!