關於網頁的自適應問題一---Media Query（媒介查詢）

一、Media Query（媒介查詢）

經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和」小於或等於」。如：width會有min-width和max-width媒介查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。

用法

@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}

 

CSS的@media與@media screen，媒體查詢/匹配

媒體查詢也是css3的方法，咱們要解決的問題是適應手機屏幕，這個媒體查詢正是爲解決這個問題而生。

媒體查詢的功能就是爲不一樣的媒體設置不一樣的css樣式，這裏的「媒體」包括頁面尺寸，設備屏幕尺寸等。

首先先講一下@media與@media screen區別

@media與@media screen二者在手機設備上沒有區別，但@media screen的css在打印設備裏是無效的，而@media在打印設備裏是有效的，若是css須要用在打印設備裏，那麼就用@media 。【阿里雲】上有實例講解哦~~

語法

以@media或@media screen and開頭來表示這是一條媒體查詢語句。@media後面的是一個或者多個表達式，若是表達式爲真，則應用樣式。

@media

@media (max-width: 600px) {
.mainner {
display: none;
}
}

上面的代碼在屏幕寬度小於 600px 的時候，會做用大括號裏的內容。

注：max-width是目標顯示區域的寬度，例如，瀏覽器寬度。

媒體查詢能夠在 link標籤上加media屬性或css文件中使用。具體例子就不舉了。

@media screen

如下例子爲當屏幕寬度小於400px的時候，就取消浮動

@media screen and (max-device-width: 400px)
{ .left {
float:none;
}
}

注：max-device-width是設備整個顯示區域的寬度，例如，真實的設備屏幕寬度。

知識擴展

@media only screen and
only(限定某種設備)
screen 是媒體類型裏的一種
and 被稱爲關鍵字，其餘關鍵字還包括 not
not 指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器：

例如：若是瀏覽器窗口小於 500px, 背景將變爲淺藍色：

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

 

原文出處：https://www.cnblogs.com/chenguanai/p/10936580.html