前端开发(Web Development)响应式Web设计(Responsive Web design)

Author : luckyGirl

最近有时间将前段时间作一下总结,当然也是参考了各位前辈们的文章. 首先先来讲一下响应式Web设计,也产生了流布局设计的概念

主要参考文章: http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
      http://www.alistapart.com/articles/responsive-web-design/
响应式Web设计,是近几年比较流行的一种设计趋势,人们可以使用各种平台浏览网页,平台多样,屏幕尺寸大小更是多种多样,为了提高网站的可访问性,一种能够基于用户行为和使用环境的设计方法应运而生,即响应式Web设计,当然这个概念不仅仅是为了适用各种屏幕尺寸,也是一种关于设计的全新思路.好了,废话不多说,接下来看看如何做到响应式设计.
如果用一句话概括,那就是让你页面上的所有东西都能够足够灵活.
1. 流体网格布局(流布局)
   简单来说就是灵活使用div并运用相对单位(%/em)建立灵活的层次,如下图所示,将固定大小的页面转换为局:(固定值转换为相对值的计算就不在这详述啦)
   

Note: 有时页面为了显示内容不会错乱,需要结合min-width, max-width的使用, PS. IE6不支持这2个属性哦~~

2. 使用CSS “media” 属性
   根据不同的屏幕宽度亦或是横向/纵向阅读,加载不同的样式表
   方法一: 多个单独的样式表
   <link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”shetland.css” />
   <link rel=”stylesheet” type=”text/css” media=”print” href=”shetland.css” />
   方法二: 使用@media在同一个样式表引入不同的CSS
   <link rel=”stylesheet” type=”text/css” media=”all” href=”shetland.css” />
   

 

3. 让图片更加灵活
   图片是使页面更加生动活泼的重要元素,图片的加载也会影响到页面显示的速度,为了避免图片加载过慢,进而影响到页面的布局,通常图片的大小必须提前确定,以确保在加载完成前,图片已经有一定的占位空间,以不至于在加载完成后重新渲染页面.
   最简单的办法就是使图片适应其父元素的宽度(图片的高度在未定义时会随宽度的变化而按比例变化)
   

虽然使图片大小随父元素的宽度而变化是一种比较方便快速的方法,但从用户角度,流量是一个不略的方面,毕竟为大屏幕而设计的图片应用在较小的屏幕上是一种宽带的浪费并会使加载速度变慢,因此不同大小的屏幕设计不同大小图片的技术也是个不错的选择. the Filament Group就是一种不仅可以改变图片尺寸而且可为小屏幕压缩图片的技术,大家可以尝试一下.


4. 依据不同的设备显示不同的内容
   由于屏幕大小的限制,用户的可视空间不同,比如在手机用户需要的是一个更加精简的页面展示,一些纯属装饰的内容或是次要内容不需要显示, 为完成此目的,就需要联合应用以上的3种技术,如通过media属性加载不同的样式表,运用display:none 进行内容的显示与隐藏,效果如下图:
   

 

小结
   我们已经步入了一个选择多样化的时代,而且选择也将不断增多,以上所涉及到的响应式Web设计以及相关的技术也不是解决这种不断变化的最终答案,只能说大家根据现有的web标准并尊重用户的真实需求去设计去开发,提升网站的可访问性~~~
转载请标明来源,谢谢!  http://www.yuuuuc.me/?p=416

 

standard
  1. lovecicy - 2012 年 10 月 29 日 5:39 下午

    正好需要用到响应式设计啊

    回复

Have your say