WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

6-2. 認識RWD響應式網頁設計

所謂「RWD 響應式網頁設計」表示所設計的網頁在各式各樣的輸出設備中皆能呈現合理完善的排版。

有關多媒體查詢的新樣式規則

版本 屬性 說 明
3 @media 針對不同媒體輸出設備或是不同的螢幕尺寸而設定不同的CSS樣式改變。
參考【英文版】 【英文版】 【簡中版】 【簡中版

例如:

當瀏覽器視窗的最小寬度為480px時,表示大於等於480px時,改變 body 的設定

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

例如:

當瀏覽器視窗的最大寬度900px而且最小寬度為600px時 (表示 >= 600 且 <= 900),
或者最小寬度為1100px (表示 >= 1100),改變 class 名稱為 example 的 div 元素的設定,
這只是一個舉例的介紹,通常不使用太複雜的條件。

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

 

參考範例的結果 【連結查看範例

這是桌機版本時的排版樣子 這是手機版本時的排版樣子

 

了解螢幕顯示器的規格

screensiz.es】或【Device Metrics
設計了手機、平板、桌機...等各種顯示器規格,方便快速查詢了解螢幕顯示器的規格。

 

 

go TOP