本篇文章比较偏技术说明，如果您想了解可以参考看看。
什么是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网站示意图
(本文为达文西数位科技所有，转载文图请注明出处)
