Responsive Web Design 響應式網站設計簡明入門教學

2016-10-19 21:51:00

隨著行動網路的普及，越來越多使用者使用不同的裝置來上網。然而由於不同裝置有不同的解析度和螢幕大小，若是開發者在設計網站時沒有預留一些彈性或是針對不同的裝置作支援很有可能在瀏覽網站時發生破版，閱讀不易等問題，降低了使用者體驗，更有可能的是讓原本願意消費的使用者放棄了整個使用流程。有許多的方案可以針對行動網站做設計，其中 Responsive Web Design 響應式網站設計（又稱自適應網頁設計、回應式網頁設計）是成本相對低廉和支援性也不錯的方案，可以針對使用者裝置大小顯示適合的畫面。這篇文章當中，我們將帶大家走過 Responsive Web Design 響應式網站設計的一些重點。

響應式網站設計最早是由 A List Apart 的 Ethan Marcotte 所定義，這項設計可針對使用者的需求和其所使用的裝置做出回應。版面配置會隨著裝置的螢幕大小和功能變動。舉例來說，使用者在手機上會看到以一欄顯示的內容；在平板電腦上則會看到以兩欄顯示的相同內容。

一般而言，採用 Responsive Web Design 響應式網站設計有幾個重點需要把握：

設定檢視區（Viewport）
使用 CSS3 Media queries @media 針對不同寬度的瀏覽器提供適合的頁面樣式
使用流動性/比例式網格系統
使用相對比例的響應式大小圖片
使用相對比例的響應式大小影片
針對不同裝置，保持適合閱讀的文字大小

以下我們就針對 Responsive Web Design 響應式網站設計重點進行進一步討論：

設定檢視區（Viewport）

在網頁的 meta data 中，我們可以設定網頁的 viewport ，指示瀏覽器如何控制網頁的大小和縮放，為了讓網頁可以適應不同的螢幕裝置大小，我們使用 width=device-width 配合裝置的寬度，使用 initial-scale=1 則可以在 CSS 像素和裝置獨立像素之間建立 1:1 的關係，當螢幕換方向時也可以讓網頁充分運用橫向寬度。

使用 CSS3 Media queries `@media` 針對不同寬度的瀏覽器提供適合的頁面樣式

在 Responsive Web Design 中一大重點就是針對不同寬度的瀏覽器提供適合的頁面樣式，這時就需要善用 CSS3 Media queries @media ，其基本格式如下，可以針對輸入的 query 對應不同的 CSS：

@media (query) {
/ CSS Rules used when query matches /
}

以下是 CSS3 Media queries @media 範例，可以看到我們可以在引入 CSS 上使用media 屬性來設定依照螢幕大小來載入對應 CSS：

-- 當螢幕大小在 400 - 500px 間時使用 --!>

@media (min-width: 400px) and (max-width: 500px) {
h1 {
color: fuchsia;
}

.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
style>

盡量使用相對寬度，例如 width: 100% ，盡量少用絕對單位，善用 min-width 和float 屬性確保畫面顯示的正常。最常用的是 min-width 、 max-width 、 min-height 和 max-height 等屬性（不建議使用 *-device-width 因為在某些瀏覽器或裝置上會有問題）。

不建議使用絕對單位：

div.fullWidth {
width: 320px;
margin-left: auto;
margin-right: auto;
}

建議使用相對單位：

div.fullWidth {
width: 100%;
}

使用流動性/比例式網格系統

目前主流在 Responsive Web Design，有五大外觀設計模式：主體為流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、微小調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。

在實作這幾種設計模式時通常會使用到 CSS Flexible Boxes，並設計中斷點（wrap），詳細介紹可以參考 Google 回應式網頁設計模式的完整介紹。

先建立 HTML 架構：

mostly fluidtitle>
head>

1div>
2div>
3div>
4div>
5div>
div>
body>
html>

主體為流動（mostly fluid）![](https://v1cdn.imspm.com/e/ea4aa7922b114f68a1d1cdf35a4ff929.png)CSS 設計：.container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap;}.c1, .c2, .c3, .c4, .c5 { width: 100%;}@media (min-width: 600px) { .c2, .c3, .c4, .c5 { width: 50%; }}@media (min-width: 800px) { .c1 { width: 60%; } .c2 { width: 40%; } .c3, .c4, .c5 { width: 33.33%; }}@media (min-width: 800px) { .container { width: 800px; margin-left: auto; margin-right: auto; }}

欄內容下排 (column drop)![](https://v1cdn.imspm.com/e/800199514163499baa5ce5fb53269f45.png)CSS 設計：.container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap;}.c1, .c2, .c3 { width: 100%;}@media (min-width: 600px) { .c1 { width: 60%; -webkit-order: 2; order: 2; } .c2 { width: 40%; -webkit-order: 1; order: 1; } .c3 { width: 100%; -webkit-order: 3; order: 3; }}@media (min-width: 800px) { .c2 { width: 20%; } .c3 { width: 20%; }}

版面配置位移 (layout shifter)![](https://v1cdn.imspm.com/e/e9b08da5a3d648269f9279a308f1bf5d.png).container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap;}.c1, .c2, .c3, .c4 { width: 100%;}@media (min-width: 600px) { .c1 { width: 25%; } .c4 { width: 75%; }}@media (min-width: 800px) { .container { width: 800px; margin-left: auto; margin-right: auto; }}

微小調整 (tiny tweaks)![](https://v1cdn.imspm.com/e/c9aa373e091b4e02aae243cae42b3860.png).c1 { padding: 10px; width: 100%;}@media (min-width: 500px) { .c1 { padding: 20px; font-size: 1.5em; }}@media (min-width: 800px) { .c1 { padding: 40px; font-size: 2em; }}

畫布外空間利用 (off canvas)![](https://v1cdn.imspm.com/e/32ba040fe9df425fbc8eb17615e1b5f2.png)body { overflow-x: hidden;}.container { display: block;}.c1, .c3 { position: absolute; width: 250px; height: 100%; /* This is a trick to improve performance on newer versions of Chrome # perfmatters */ -webkit-backface-visibility: hidden; backface-visibility: hidden;  -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; z-index: 1;}.c1 { /* Using translate3d as a trick to improve performance on older versions of Chrome See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ # perfmatters */ -webkit-transform: translate(-250px,0); transform: translate(-250px,0);}.c2 { width: 100%; position: absolute;}.c3 { left: 100%;}.c1.open { -webkit-transform: translate(0,0); transform: translate(0,0);}.c3.open { -webkit-transform: translate(-250px,0); transform: translate(-250px,0);}@media (min-width: 500px) { /* If the screen is wider then 500px, use Flexbox */ .container { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; } .c1 { position: relative; -webkit-transition: none 0s ease-out; transition: none 0s ease-out; -webkit-transform: translate(0,0); transform: translate(0,0); } .c2 { position: static; }}@media (min-width: 800px) { body { overflow-x: auto; } .c3 { position: relative; left: auto; -webkit-transition: none 0s ease-out; transition: none 0s ease-out; -webkit-transform: translate(0,0); transform: translate(0,0); }}