响应式网页responsive web design是一种设

响应式网页（Responsive Web Design）是一种设计概念，希望能让网页适用在不同的平台上。公司最近想对产品大改版，于是又来练练 RWD 搂！

这次并不会使用 Grid System，而是单纯使用 CSS 的 Media Query。而在撰写 CSS 的部分，如果是共通、可以共用的，我会放在 Common 的区块，而其他针对特定尺寸的指令，便分别放在单独的区块里，例如：

前天刚好跟一位在做餐饮的朋友吃饭，就用“食物”来当成这次实作网站的主题吧！Demo 网站 Food Sense

之前常有人提到，RWD 是有助于 SEO 的，可参考 4 SEO Benefits of Responsive Web Design。一来是网址统一，不浪费 link juice，另一方面是因为提高可阅读性而降低网站的跳出率。但对于拥有复杂流程的网站而言，希望用一个版本的 HTML 再搭配不同的 CSS，而能适应 PC、平板、手机是困难的，因为流程与功能复杂，势必会有流程变动或功能增减，所以可能的解法就是判断平台或分辨率，然后转跳到不同的页面。因此就演变成作两个版本的 HTML - PC + 移动设备（平板与手机）。但若决定做一个以上的版本的页面，就需要考虑维护成本了。

由于部落格搬迁至此，因此在这里放了一份，以便阅读；部分文章片段也做了些许修改，以期提供更好的内容。