網頁設計實驗室

Web Design Laboratory

一次搞懂RWD響應式網頁

Dec 14, 2024

什麼是RWD響應式網頁
RWD響應式網頁最詳盡的介紹與操作使用方法 什麼是RWD響應式網頁? RWD(Responsive Web Design)響應式網頁設計是一種網頁設計技術,讓網站能夠自動適應不同尺寸的螢幕,從桌面電腦、平板電腦到手機,都能提供最佳的瀏覽體驗。簡單來說,就是一個網站能根據使用者使用的裝置,自動調整網頁的版面和內容,讓使用者在任何裝置上都能輕鬆瀏覽。
RWD主要透過CSS媒體查詢(Media Queries)來實現。CSS媒體查詢允許根據不同的螢幕尺寸、解析度、方向等條件,來應用不同的樣式。

第一步 : 在網頁內碼中,設定Viewport,告訴瀏覽器如何顯示網頁

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

第二步 : 使用CSS媒體查詢,根據不同的螢幕尺寸,應用不同的樣式

 CSS
  @media (min-width: 768px) {
    /* 螢幕寬度大於等於768px時的樣式 */
  }
  @media (max-width: 767px) {
    /* 螢幕寬度小於767px時的樣式 */
  }

更深度了解Media Query裝置分辨率
撰寫 Media Query 時需注意順序,後方程式碼會取代前方程式碼進行套用。

max-width,表示這個數字以下(包含) 的都適用。
min-width,表示這個數字以上(包含) 的都適用。

 行動裝置為主

  @media screen and (min-width: 576px) { ... }

  // Medium devices (tablets, 768px and up)
  @media screen and (min-width: 768px) { ... }

  // Large devices (desktops, 992px and up)
  @media screen and (min-width: 992px) { ... }

  // X-Large devices (large desktops, 1200px and up)
  @media screen and (min-width: 1200px) { ... }

  // XX-Large devices (larger desktops, 1400px and up)
  @media screen and (min-width: 1400px) { ... }




 桌機為主

  // X-Small devices (portrait phones, less than 576px)
  @media screen and (max-width: 575.98px) { ... }

  // Small devices (landscape phones, less than 768px)
  @media screen and (max-width: 767.98px) { ... }

  // Medium devices (tablets, less than 992px)
  @media screen and (max-width: 991.98px) { ... }

  // Large devices (desktops, less than 1200px)
  @media screen and (max-width: 1199.98px) { ... }

  // X-Large devices (large desktops, less than 1400px)
  @media screen and (max-width: 1399.98px) { ... }



rwd