響應式網頁設計

習題預習

1. 什麼是Responsive Web Design？
2. 哪些是創建Responsive Web Design的最佳實踐？
3. 討論Responsive Web Design的好處是什麼？
4. 如何使用媒體查詢在Responsive Web Design中設置不同的樣式？
5. 什麼是Retina Ready圖像，並如何使Responsive Web Design Retina Ready？

說明知識

Responsive web design是一種設計網頁的方法，可以讓網頁在不同的設備上（如桌面電腦、平板電腦、手機）都能自動調整以適合螢幕大小，提供更好的使用體驗。

舉例來說，假如某網站使用了Responsive web design，當使用者在桌面電腦上瀏覽網站時，網頁會以螢幕寬度為基準，自動調整版面、文字大小、圖片大小，讓使用者可以看到更舒適的畫面；而當使用者轉換到平板電腦或手機上瀏覽同一個網站時，網頁會自動根據螢幕大小進行縮放和調整，以方便使用者觀看和操作，並不會因為螢幕大小而造成不良的使用者體驗。這樣的網站設計方式，使得網站可適應不同設備，成為現代網頁開發中的重要方法之一。

彙總重點

1. 可讀性：讓網頁內容在不同尺寸的螢幕上都能夠清晰、易讀。

2. 調整尺寸：將網頁的內容、圖片、影片等元素根據螢幕尺寸進行自動調整，避免出現水平捲動條。

3. 版面設計：設計一個靈活的版面，讓網站在不同的螢幕尺寸上都可以呈現出最佳排版。

4. 彈性圖片：使用彈性圖片（Flexible Images）、以及圖片的寬度、高度限制等方式，使圖片在不同屏幕上能夠以最佳尺寸呈現。

5. 可變字型：適時更改字型大小和行間距等，使網站載入後更容易閱讀。

6. 媒體查詢：使用 CSS 媒體查詢，讓網頁能夠根據不同裝置尺寸進行調適，讓使用者在任何裝置上都能夠流暢地使用。

7. 彈性佈局：使用流式佈局、條形網頁等方案，讓網頁能更加彈性地適應不同裝置尺寸。

8. 推行效果：設計流暢、美觀的推行效果（Transitions and Animations），增加使用者的交互感和樂觀性，使網頁內容更易被看到。

9. 瀑布流式：設計瀑布流式版面，使網頁呈現方式更加生動有趣，也容易吸引使用者注意。

10. 結構清晰：設計網頁範圍、區域、內容整合等功能，讓網頁構造更清晰、易於查看。

知識測驗

1. 如何利用媒體查詢(Media Queries)在不同的裝置上顯示不同的背景顏色？
   答案：在 CSS 檔案中，可以使用以下的程式碼來實現：

@media (max-width: 767px) {
body {
background-color: red;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: green;
}
}

@media (min-width: 1025px) {
body {
background-color: blue;
}
}

2. 如何在 Responsive web design 中讓一個元件水平置中顯示？
   答案：可以在該元件外部包覆一個父元件，然後將父元件設為「text-align: center;」，該元件設置display: inline-block;。

例如，HTML 代碼如下：

然後在 CSS 中進行如下設置：

.parentDiv {
text-align: center;
}

.centeredDiv {
display: inline-block;
}

3. 如何在 RWD 中使用 flexbox 佈局？
   答案：使用如下的 CSS 代碼：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

4. 如何在不同的裝置上使用不同的字型大小？
   答案：使用媒體查詢(Media Queries)：

@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}

5. 如何在 Responsive web design 中選擇適當的圖片大小和解析度？
   答案：使用不同大小的圖片，根據裝置大小進行切換。例如，可以使用 img srcset 屬性設置多個圖片尺寸和解析度，這樣瀏覽器可以根據裝置屏幕大小選擇最適合的圖片。代碼如下：

這段代碼會在裝置寬度小於 480px 的情況下顯示 image-small.jpg，在 480-768px 之間的裝置上顯示 image-medium.jpg，在寬度大於 768px 的情況下顯示 image-large.jpg。sizes 屬性指定圖片在不同裝置大小下的顯示尺寸。