伊桑·马科特在 2010 年次提出了响应式网页设计 (RWD,Responsive Web Design) 的概念。 (当时能提出这个概念是很不简单的哦) 他根据工程师在处理不同萤幕解析度的网页内容展现的效果的时候常用的技巧和策略,创造性的进行了归纳总结。简而言之是指网页根据萤幕宽度,做出相应调整的,力求能够达到在不同的装置下,内容都能以合适的方式展现给多用户。网站响应式设计的原理就是在 CSS 中,有一个不常用到的属性 media 。为了达到响应式设计的目的,让 css 根据萤幕宽度 (例如 media screen only(max-width:480px)),使用不同的 CSS 代码,从而达到自动调整页面 DIV 宽度的目的。当然,除了 CSS,还可以使用 JS 对页面内容进行动态的调整,不过这个技术不是很流行。那么响应式网站主要分为哪些方面的设计呢?

  先是,图片的响应式设计

  对于响应式网站的设计和开发过程中,图片的设计一直是一个重点关注的物件。其中主要的就是图片需要根据多用户浏览终端的不同而随之发生变化。并且不会出现显示不全、展开有空白、图片牧户等情况。其次就是触控式萤幕上使用手势操作几乎是多用户的本能了。所以,在设计响应式图片的时候,滑动操作等手势操作赋予多用户更多的权力,让体验更加逼真。

  其次是,网站整体框架的设计

  其实对于不了解响应式网站建设的站群站长来说,不建议使用框架的形式来搭建响应式网站,可能会造成样式重复、内容类别之间发生冲突以及网页负重过于高等情况。所以使用网站整体框架的设计来建设响应式网站需要切合自身的实际情况,定位自己的需求后再进行。

  再次是,多用户体验度的建设

  多用户体验度是一个网站是否可以生存下去的根本原因之一,其中响应式网站的多用户体验度就更加重要了。响应式网站建设中常见的错误就是在 pc 端浏览是一切正常,但是到手机端或平板上的时候就变得很奇怪,这对多用户体验度是很不好的。所以响应式网站建设时应该在多个不一样的阅读终端进行浏览、测试,反复确认无误后再上线。

  后就是,网站导航栏目的设定

  导航栏的显示有时候在桌面端上导航的存在可能没什么,但是在移动端上检视的时候,导航还是尽量隐藏起来,需要的时候再显现。如左右切换的按钮和标明浏览位置的圆点,知名是在游标移动上去之后再显示,这样的设计不仅可以避免多用户分心,而且能避免内容和导航元素之间的冲突,降低整体设计的混乱感。

  近些年随着智慧手机手机的普及,站群站长们发现,从手机上来的流量一点不比在 PC 上来的少,所以,作为一种能够自动适应不同萤幕尺寸的网页设计办法,响应式设计 (Responsive Design) 正日益成为受推崇的移动网页优化方式。其实,响应式网站设计就是一种网络页面设计布局,是页面的设计与开发应当根据多用户行为以及装置环境 (系统平台、萤幕尺寸、萤幕定向等) 进行相应的响应和调整。并且在当下互联网时代,随着网民阅读终端的普遍更换,响应式网站也越来越深受企业喜爱。总之,响应式网站设计,为计算机、手机、平板电脑等不同装置的访问多用户了提供更加舒适的介面和更好的多用户体验 (和速度),而且随着目前移动装置的增长,已成为大势所趋。