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

1-12. CSS 範例再練習 (依需求挑選學習)

CSS3 多媒體查詢

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

 

例如:

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

有關多媒體查詢 【參考範例結果

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

了解螢幕顯示器的規格

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

 

 

 

go TOP