RWD網頁設計?為什麼對現代網站很重要? Day6

2023 iThome 鐵人賽

DAY 6

Software Development

從餐飲業轉職成小白工程師的所見所學系列第 6 篇

15th鐵人賽

DOJO

2023-09-16 05:45:03

470 瀏覽

分享至

RWD (Responsive Web Design) 是指響應式網頁設計。
白話的說: 是一種設計和開發網頁的方法，可以讓網頁在不同設備和螢幕尺寸上能夠自動調整和適應，提供最佳的使用者體驗。

為什麼RWD對現代網站非常重要?

多設備適應性：現在人們使用各種設備訪問網站，包括桌面電腦、筆記型電腦、平板電腦和智慧手機。RWD能確保網站在所有設備上都能夠正常運行和顯示。
提高使用者體驗：響應式設計可以確保網站內容不會變形或被截斷，讓使用者可以輕鬆瀏覽網站。
SEO優化：搜索引擎優化對於網站的成功至關重要。RWD有助於維護單一網址和內容，提高了搜索引擎的排名，使網站更容易被找到。
節省維護成本：相對於為每種不同尺寸的設備維護單獨的網站版本，RWD可以節省時間和成本，因為只需維護一個網站。

它確保了網站的可訪問性、可用性和可擴展性，有助於提供一致的用戶體驗，無論使用者使用何種設備訪問網站。
RWD就是如此的重要、便利!

以下我們來嘗試做看看 RWD 的示範:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 基本樣式 */
        p {
            font-size: 16px;
        }

        /* 在螢幕寬度小於 600px 時調整字體大小 */
        @media screen and (max-width: 600px) {
            p {
                font-size: 14px;
            }
        }

        /* 在螢幕寬度小於 400px 時進一步調整字體大小 */
        @media screen and (max-width: 400px) {
            p {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>

<h1>我是標題</h1>

<p>字體大小會根據螢幕寬度而調整。</p>

</body>
</html>

在這個範例當中，預設的文字大小是 16px。
我們使用媒體查詢，當螢幕大小 < 600px 的時候，字體來到 14px。
同理，在螢幕大小 < 400px 的時候，字體來到 12px。

我們只要使用媒體查詢，設定好 "斷點" 就可以做好一個簡單的 RWD 判斷了!

今天到這邊，我們明天見!