網頁設計實驗室

Web Design Laboratory

Latest news

一次搞懂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