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

常用于移動端排版布局使用，響應式開發(fā)。

• 參考：菜鳥教程

定義和使用

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

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

CSS 語法

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

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

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

例子：

按下F12，拖動屏幕寬度看看？

我是顏色塊一,當屏幕寬度小于300時，我會變黃我是顏色塊二，當屏幕寬度大于400px時，我會變紅我是顏色塊三，當屏幕寬度在300px至400px時，我會變灰