更深了解RWD(自适应网页设计)

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(自适应网页设计)
链接URL：https://www.cdcxhl.com/news42/79092.html

成都网站建设公司_创新互联，为您提供Google、小程序开发、网站营销、App设计、做网站、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联