目前網站的基本功能已經逐漸完成，不過網頁不只會在電腦上開啟，使用者也可能透過手機查詢食譜。

如果手機畫面沒有經過調整，可能會出現文字太小、輸入框超出畫面等問題。

因此，今天要認識 RWD（Responsive Web Design，響應式網頁設計）。

一、什麼是 RWD？

RWD 是讓網站依照不同裝置的螢幕尺寸，自動調整排版與顯示方式。

例如：

• 電腦：可以使用較寬的內容區域。
• 平板：調整部分間距和欄位。
• 手機：使用較窄的版面，讓內容依序排列。

二、加入 Viewport 設定

在 HTML 的 <head> 中加入：

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

這能讓手機瀏覽器依照裝置寬度顯示網頁。

三、加入 CSS Media Query

在 style.css 中加入：

.recipe-card {
    width: 100%;
    max-width: 420px;
    margin: 20px auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    body {
        padding: 20px 12px;
    }

    input,
    select,
    button {
        width: 100%;
        box-sizing: border-box;
        margin: 8px 0;
    }

    .recipe-card {
        padding: 18px;
    }
}

@media 可以依照螢幕尺寸套用不同的 CSS 樣式。

四、今天的成果

今天加入了基本的 RWD 設定，讓網站在手機上也能有較合適的排版。

接下來要繼續改善操作流程和視覺細節，讓使用者更容易理解網站的功能。