媒體查詢與響應式

1：基本概念

根據一個或多個基於設備類型、具體特色和環境的媒體查詢來應用樣式。簡單來講就是針對不一樣的媒體類型（好比屏幕、打印機或者屏幕閱讀器）定義不一樣的樣式，能夠針對不一樣的屏幕尺寸設置不一樣的樣式（好比手機iphone6和iPhone6plus它們兩尺寸是不同的、筆記本電腦和電腦屏幕也是不同的大小），應用的、了響應式佈局咱們就能夠實如今小尺寸的屏幕上或者大尺寸的臺式機的屏幕上顯示的效果是接近的，或者說不至於出現樣式的錯亂。

2：瀏覽器兼容

徹底支持@media第一個瀏覽器版本（ie9如下是不支持的）

圖片描述

3：語法

在瞭解語法前，咱們須要瞭解一下css，css叫作層疊樣式規則，也就是後面的會把前面的覆蓋掉，這裏涉及到了優先級的問題。所以媒體查詢@media通常放在css文件的最下面，由於讀文件是從上到下依次進行，爲了避免被覆蓋掉。

寫法一：

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

寫法二：在不一樣的屏幕尺寸下面引用不一樣的css文件

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

那麼media究竟是怎麼使用的呢？首先是它的媒體類型：

4：媒體類型（分爲四種）

all（全部設備）

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

screen（電腦屏幕，平板電腦，智能手機）

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

print（打印機和打印預覽）

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

speech（屏幕閱讀器等發聲設備，通常是供盲人瀏覽網頁使用）

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

5：運算符（是跟在mediatype後面的）

運算符是跟在mediatype後面的，它的意思就是and鏈接、not不是、only，除此以外還有一個，逗號，逗號就是或的意思，兩個逗號左側或在右側知足任何一個都會應用樣式。

and

@media screen and (max-width: 600px) {
        CSS-Code;
 }

not

@media not screen {
        CSS-Code;
}

only

@media only screen {
        CSS-Code;
}

, 表示或的意思

@media print , (max-width : 600px) {
        CSS-Code;
 }

6：媒體功能

咱們大多數的開發工做都是應用在屏幕上的，屏幕有不少尺寸，這個時候咱們就須要使用媒體功能來應用不一樣的樣式。下面主要介紹了三個：

width / height

@media screen and (width : 600px) , (width : 800px) {
        CSS-Code;
}

min-width / min-height

@media screen and (min-width : 600px) {
        CSS-Code;
}

max-width / max-height

@media screen and (max-width : 600px) {
        CSS-Code;
}

除了上面的三個主要的還有一些其餘的媒體功能：

• device-height - 屏幕可見高度
• min-device-height - 最小的可視區域
• max-device-height - 最大的可視區域
• device-width - 屏幕可見寬度
• max-device-width
• min-device-width
• (color: 8) - 每一組彩色原件的個數
• max-color
• min-color
• (color-index: 1500) - 設備的彩色查詢表條目數
• max-color-index
• min-color-index
• (orientation: landscape) - 橫縱
• (monochrome: 0) - 一個單色框架緩衝區中每像素包含的單色原件個數
• min-monochrome
• max-monochrome
• (grid: 1) - 是否使用柵格或點陣
• (scan: interlace) - 掃描工序
• (device-aspect-ratio: 8/5) - 屏幕可見區域寬高比
• min-device-aspect-ratio
• max-device-aspect-ratio
• (aspect-ratio: 8/5) - 頁面可見區域寬高比
• min-aspect-ratio
• max-aspect-ratio
• (resolution: 996dpi)- 分辨率
• min-resolution
• max-resolution
• device-pixel-ratio - 像素比
• min-device-pixel-ratio
• max-device-pixel-ratio

其中比較重要的一個像素比 device-pixel-ratio：又分爲物理像素（實際的硬件像素）和邏輯像素（跟適口viewport有關）。

7：常見的自適應佈局方式

• px和Viewpor
• 媒體查詢
• 百分比佈局
• rem佈局 - 專題介
• vw/vh - 相對於視窗的尺寸