---
type: slide
---

# 新聞網頁製作（五）- Responsive Web Design 響應式網頁

---

1. 下載練習檔案 https://github.com/nickhsine/teach-at-nccu/raw/master/111-02/05-16/exercise.zip
2. open `article.html`
3. 目前僅有手機版，目標是實作 RWD
4. mockup：
https://www.figma.com/file/hDxOKN9XajmZDAPKV0mSrT/course-practice-media-queries

---

<p style="text-align:left; padding: 20px;">手機版的寬度目前都是寫死 px，我們希望版型能隨著寬度變寬，進行調整。</p>

---

### 修改最外層的區塊

.mobile-layout {
    /* 讓最外層的寬度隨著螢幕大小變化 */
    width: 100%;
}

---

#### 修改首圖

.hero-image {
    /* 讓圖片隨著螢幕大小變化
     * 跟隨 parent 的大小 */
    width: 100%;
}

.hero-image img {
    /* 讓圖片的寬度跟著 parent 調整 */
    width: 100%;
}

---

#### 修改內文圖

.article-image {
    width: 100%;
}

.article-image img {
    width: 100%;
}

---

#### 修改文章段落

.article-body > p {
    /* 讓文字區塊跟隨螢幕等比例放大 */
    /* width: 300px */
    width: calc( 300 / 375 * 100%);
    margin-left: auto;
    margin-right: auto;
}

---

### 實作 desktop 版型

---

#### 調整大標

@media (min-width: 1024px) {
    h1 {
        font-size: 42px;
        width: 680px;
        margin-bottom: 60px;
    }
}

---

#### 調整首圖(hero image)

@media (min-width: 1024px) {
    .hero-image 
        /* 最大的圖片寬度 */
        max-width: 880px;
    }
}

---

#### 調整 metadata

@media (min-width:1024px) {
    .metadata {
        width: 480px;
    }
}

---

#### 調整內文

@media (min-width: 1024px) {
    .article-body > p {
        max-width: 480px;
    }
}

---

#### 調整小標

@media (min-width: 1024px) {
    .article-body > p {
        max-width: 480px;
    }
}

---

#### 調整內文圖

@media (min-width: 1024px) {
    .article-image {
        max-width: calc(50% + 240px);
        margin-left: auto;
    }
}

---

#### 調整 back to top 按鈕

/* 隱藏 back to top */
@media (min-width: 768px) {
    #back-to-top {
        display: none;
    }
}

###### tags: `slides`