[Back To Basic] CSS Media Queries

Media Type

css2曾推出@media規則，可根據不同裝置，套用不同的css樣式，但沒有太多裝置支援此規則

Media Queries

css3延伸 Media Type 的想法，依據下列規則，達成目的。

• 視窗寬高
• 設備寬高
• 設備方向
• 解析度

CSS3 Media Type

• all

所有設備

• print

印表機

• screen

螢幕

• speech

螢幕閱讀機

語法

@media not|only MediaType and (expressions) { /* 套用條件 */

/* 要套用的CSS樣式 */

}

e.g.

@media screen and (min-width: 960px) { /* 螢幕寬度在960以上皆套用 */

  .block1 {

    background-color: blueviolet;

  }

}

source code