响应式网页设计：web产品RWD概念

Posted 2020-08-03

RWD（Responsive Web Design）

可称为自适应网页设计、响应式网页设计、响应式网页设计等等，是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术，让使用者可以不需要透过缩放的方式来浏览网页，大大的提升画面的可浏览性及使用界面的亲和度；然而这对于行动商务越来越受到重视的现今来说，随之也越来越倍受重视。

　　近几年，随着行动装置（智慧型手机、平板）的普及，以及行动上网服务的使用率越来越高，传统网页的标准已经无法符合这些装置的需求来呈现了，尤其是以flash制作的动画，受限于行动装置运算力不足的限制之下，已经没有行动装置可以直接浏览flash制作的网页了。虽然可透过一些特殊的浏器APP软件来观看，但方便性却大大的降低。

　　而RWD又是如何达到的呢？

　　主要是以html5的标准及CSS3中的media queries来达到的。

　　在HTML5的标准中，我们可以指定页面的宽度可以依照装置的检视宽度来呈现，再利用CSS3的media queries来设定不同宽度下使用不同的CSS来呈现页面。因此设计师在设计网页时，就必须要针对不同的宽度下的画面编写不同的CSS档案供浏览器来读取。

　　RWD的优点：

　　1.可使用同一套原始码来撰写CSS，可以减少版面重新制作的时间。

　　2.可同时针对不同的分辨率来设定，增加页面的可用性。

　　3.对于搜寻引擎的收录不会造成影响，不影响SEO的结果。

　　4.开发时间较APP来说可以快速很多。

　　5.学习门坎较低，对于已经从事网页设计的人员来说，此技术只是建构在原本的DIV+CSS之上的一门技术，因此学习起来相对容易。

　　RWD的缺点：

　　1.因为在同一页面会置入多种分辨率的CSS档案会增加页面传输量，加载的时间也会加长。

　　2.若在各种分辨率下的画面都需校槁的话，在制作版面的时间会大大的增加。

　　3.无法提供像APP般功能强大的功能，或是各种酷炫的拖拉效果。

　　4.开发时程较传统网页需相对多的时间。

　　以上提供RWD的各项优缺点分析。

　　最后，想要可以体验RWD的功能前，还有一项最重要的基本要素，那就是浏览的支持度。由于RWD是建立在CSS3的基础之下，因此要支持RWD也必须要支持CSS3的浏览器才行，以下列出各大浏览器支持的版本：

　　?Internet Explore 9以上

　　?Chrome、Firefox、Opera使用自动更新至最新版本即可

　　虽然还有些人撰写了JS来让IE8以下的版本来支持CSS3等语法，但目前还是支持度不佳，且IE8的使用者还在不断的减少中，因此使用新的浏览器才是真正体验RWD的最好办法。

　　本篇文章整理简单的介绍了RWD的基本观念，并分析其优缺点，让有意使用RWD的人们对于此技术有更多的了解。

本文出自 “先来一杯java压压惊” 博客，请务必保留此出处http://maybeone.blog.51cto.com/11734094/1796003