本篇文章比较偏技术说明,如果您想了解可以参考看看。
什么是RWD网页设计?
RWD (Responsive web design) 响应式设计,是因应市面上多种行动装置而产生的网页新技术,简单来说就是让一个网页,不论在何种装置上,都能让使用者容易浏览内容,其中制作时需包含了以下三个特点:Fluid Grid、 Fiexible Images、CSS3 media queries 。
〈延伸阅读:SEO架构的网页设计,SEO成功率才会高〉
流动式布局Fluid Grid、有弹性的图片Fiexible Images、CSS3 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浏览时,此连结的字体大小为13px,1.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点只是RWD中CSS的冰山一角,更多的CSS语法设定,就留待实际制作网站时,交由专业的视觉设计师再一一去解决。
〈延伸阅读:网页设计收费行情? 如何选择网页设计公司?〉
RWD网站示意图
(本文为达文西数位科技所有,转载文图请注明出处)