RWD响应式设计的制作特点

Author: Locust
RWD


本篇文章比较偏技术说明,如果您想了解可以参考看看。


什么是RWD网页设计?

RWD (Responsive web design) 响应式设计,是因应市面上多种行动装置而产生的网页新技术,简单来说就是让一个网页,不论在何种装置上,都能让使用者容易浏览内容,其中制作时需包含了以下三个特点:Fluid Grid Fiexible ImagesCSS3 media queries

〈延伸阅读:SEO架构的网页设计,SEO成功率才会高

 

流动式布局Fluid Grid、有弹性的图片Fiexible ImagesCSS3 media queries

把网站的版面,以表格的方式理解,每个网站都会有不同的表格(区块),在不同的装置大小下,自动的变动相关区块以符合浏览大小。

 

而其中要考虑的,不但是版面变动后的区块变动,连同宽度、文字间距、图片大小、字型大小、字体等,凡是网站上看的到的元素,都需要依缩小后的版面去进行调整,进行不同的CSS设定,听起来简单,但实际上网站设计师及视觉设计师的工作可因此要多花上许多时间,考虑的细节之多,若是没有多年的经验实在很难面面俱到。

 

以下用几个CSS作为范例简单说明一下:

 

RWD的字体大小缩放

px为单位是我们一般习惯的,但在不同装置下,随着营幕像素大小不同,这时就可以改用rem为单位,以下是基本字体大小 1rem=10px 范例,至于为什么还需要指定px,只因为IE6~8不支援rem

 

@media screen and (min-width: 769px) and (max-width: 1023px)

.technology-nav a { font-size: 13px; font-size: 1.3rem; }

 

使用769px~1023px浏览时,此连结的字体大小为13px1.3rem

 

RWD的间距位置控制

其中包含了网站内容,多媒体、图片及文字的间距位置,当字体缩小后,文字间的距离也必需随着变动,当画面缩小后,不仅是区块宽度,就连同间距都需要调整,浏览起来才不致于突兀。

 

@media screen and (max-width: 768px)
{ #logo { left: 20px; width: 120px; }

 

使用768px以内浏览时,logo这个区块,左方间距设定为20px,区块宽度为120px

 

@media screen and (max-width: 480px)

{ #banner .slick-wrap p { margin: 10px 0; }

 

使用480px以内浏览时,文字内容区块边界设定为10px

 

以上2点只是RWDCSS的冰山一角,更多的CSS语法设定,就留待实际制作网站时,交由专业的视觉设计师再一一去解决。

〈延伸阅读:网页设计收费行情? 如何选择网页设计公司?

 

RWD网站示意图






(本文为达文西数位科技所有,转载文图请注明出处)

迈入网站与SEO工作已经超过20年,喜欢探索新知与研究技术,总是希望给您最适合的解决方案。

SEO套版網站,優惠 $ NT 62,000 (1年代管+SSL)

請與我們聯繫
線上客服 TOP