CSS3 @media 查詢 – 根據(jù)屏幕尺寸采用不同的展示效果

常用于移動(dòng)端排版布局使用，響應(yīng)式開(kāi)發(fā)。

• 參考：菜鳥(niǎo)教程

定義和使用

使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

CSS 語(yǔ)法

@media?mediatype?and|not|only?(media feature)?{
???CSS-Code;
}

你也可以針對(duì)不同的媒體使用不同?stylesheets?:

<link rel="stylesheet" media="mediatype?and|not|only (media feature)" href="mystylesheet.css">

例子：

按下F12，拖動(dòng)屏幕寬度看看？

我是顏色塊一,當(dāng)屏幕寬度小于300時(shí)，我會(huì)變黃我是顏色塊二，當(dāng)屏幕寬度大于400px時(shí)，我會(huì)變紅我是顏色塊三，當(dāng)屏幕寬度在300px至400px時(shí)，我會(huì)變灰