CSS3 多媒體查詢

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

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

例如：

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

例如：

@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】
設計了手機、平板、桌機...等各種顯示器規格，方便快速查詢了解螢幕顯示器的規格。