Media Queries

自適應(yīng)階段

自從有了不同屏幕的尺寸，我們就開(kāi)始嘗試自適應(yīng)了

居中

雖然不能讓所有屏幕都自適應(yīng)，但是可以利用居中讓元素看起來(lái)在同一位置

.center{
    width: 990px;
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
}

百分比

同樣可以利用百分比讓DOM結(jié)構(gòu)適應(yīng)屏幕

.container{
    border-top: solid 1px #666;
    border-left: solid 1px #666;;
}

.item{
    display: inline-block;
    width: 33%;
    height: 200px;
    border-right: solid 1px #666;
    border-bottom: solid 1px #666;
    background: orange;
    box-sizing: border-box;
}

浮動(dòng)

對(duì)于寬度不一的，我們可以利用浮動(dòng)做到一定程度的自適應(yīng),寬度不夠時(shí)會(huì)被擠下去。

.container{
    overflow: hidden;
    padding: 20px;
}

.item{
    float: left;
    padding: 8px 12px;
    border: solid 1px #1686cc;
}

響應(yīng)式

終于等來(lái)了CSS3的Media Queries，可以讓我們針對(duì)不同的設(shè)備場(chǎng)景使用不同的CSS

CSS 2

實(shí)際上在很早之前，CSS就支持媒體查詢了

頁(yè)面有些部分需要在打印的時(shí)候隱藏或者變大，這時(shí)候可以使用media使某些style只在打印的時(shí)候生效

@media print {
   /* 適用于印刷的樣式 */
}
常用的媒體類型有

1. all（所有），適用于所有設(shè)備。
2. handheld（手持），用于手持設(shè)備。
3. print（印刷），用于分頁(yè)材料以及打印預(yù)覽模式下在屏幕上的文檔視圖。
4. projection（投影），用于投影演示文稿，例如投影儀。
5. screen（屏幕） ，主要用于計(jì)算機(jī)屏幕。
   在使用的時(shí)候可以在樣式表直接書寫 @media指令+空格+媒體類型（多個(gè)逗號(hào)隔開(kāi)）

@media print {
   body { font-size: 10pt } /*打印的時(shí)候字體為10px*/
 }
 @media screen {
   body { font-size: 13px }parsing-errors /*在屏幕上看時(shí)字體為13px */
 }
 @media screen, print {
   body { line-height: 1.2 }
 }

CSS 3

但是CSS 2的媒體類型應(yīng)用場(chǎng)景極為有限，CSS3大大拓展了這一能力

@media screen and (max-width: 990px){
    .container{
        background: orange; /*在屏幕上。并且是小于990px的屏幕上這個(gè)樣式是生效的*/
    }
}

當(dāng)媒體類型匹配且表達(dá)式為真的時(shí)候，對(duì)應(yīng)style就會(huì)其作用，除非使用not或者only操作符，否則媒體類型不是必需的，默認(rèn)代表所有媒體類型。

操作符

and(一般用的最多的就是and，其他還有not,only等不常用)

and操作符用于將多個(gè)media feature組合成一個(gè)查詢，同時(shí)用于組合media type(比如上面的screen,print等) 和media feature，一個(gè)基本的media query類似這樣，一個(gè)meidia feature作用于所有media type

@media (min-width: 700px) { ... }

但是如果只想在橫向顯示時(shí)應(yīng)用就可以使用and操作符把media type和media feature結(jié)合起來(lái)

@media (min-width: 700px) and (orientation: landscape) { ... } /*橫屏*/

這樣上面的media query只有在可視窗口（viewport）最小是700px并且是橫向顯示的時(shí)候才返回true，如果還想進(jìn)一步限制設(shè)備為tv可以這樣

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

逗號(hào)分隔的列表

在使用逗號(hào)分隔的查詢列表中每個(gè)查詢都被視為一個(gè)獨(dú)立的查詢，任何本查詢中的作用符不影響其他查詢，只要有一個(gè)查詢返回true，style就會(huì)被作用。

舉例來(lái)說(shuō)，如果希望特定style在viewport最小寬度為700px或手持式設(shè)備上生效，可以這么寫：

@media (min-width: 700px), handheld and (orientation: landscape) { ... } not

not操作符作用域整個(gè)查詢，所以只有在整個(gè)查詢返回false的情況下使用not后才會(huì)返回true。當(dāng)使用逗號(hào)分隔的列表的時(shí)候not作用于鄰近的查詢，而不會(huì)作用于每個(gè)查詢

@media not all and (monochrome) { ... }

查詢其實(shí)會(huì)這樣起作用

@media not (all and (monochrome)) { ... }

而不是這樣

@media (not all) and (monochrome) { ... }

對(duì)于逗號(hào)分隔的列表

@media not screen and (color), print and (color)

查詢是這樣子的

@media (not (screen and (color))), print and (color) only

only操作符用于阻止不支持帶有media feature的media queries的瀏覽器應(yīng)用特定style

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

media features

有以下常用的media feature

• width：瀏覽器寬度

• height：瀏覽器高度

• device-width：設(shè)備屏幕分辨率的寬度值

• device-height：設(shè)備屏幕分辨率的高度值

• orientation：瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape

• aspect-ratio：比例值，瀏覽器的縱橫比

• device-aspect-ratio：比例值，屏幕的縱橫比

• color：設(shè)備使用多少位的顏色值，如果不是彩色設(shè)備，值為0

• color-index：色彩表的色彩數(shù)

• monochrome：?jiǎn)紊珟彌_器每個(gè)像素的字節(jié)

• resolution：分辨率值，設(shè)備分辨率值

• scan：電視機(jī)類型設(shè)備掃描方式，progressive或interlace

• grid：只能指定兩個(gè)值0或1，是否基于柵格的設(shè)備

如何引入media

有兩種常用的引入方式

一，link方法引入

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

二，@media引入

@media screen and (min-width: 600px) and (max-width: 800px){

    選擇器{

        屬性：屬性值；

    }

}

使用舉例：

1：

    <style>
        .box {
            width: 200px;
            height: 200px;
            background: #fed9be; /*小于500時(shí)生效*/
        }

        @media (min-width: 500px) {
            .box {
                background: #adc3fe; /*width小于800大于500時(shí)生效*/
            }
        }
        @media (min-width:  800px) {
            .box {
                background: #b1feb1; /*width大于800時(shí)生效*/
            }
        }
    </style>
</head>
<body>
<div class="box"></div>

注意上例中，500寫到800后面就不一樣了，相當(dāng)于css語(yǔ)句都生效的時(shí)候，后面的會(huì)覆蓋前面的樣式
另外，如果css選擇器的權(quán)重不一樣的的話，比如本體的權(quán)重很大，后面@media只寫一個(gè).box，那么后面的@media的樣式不會(huì)生效

@media內(nèi)部的語(yǔ)句在生效時(shí)，本質(zhì)上就相當(dāng)于一條普通的語(yǔ)句，會(huì)覆蓋前面的語(yǔ)句

2 柵格系統(tǒng)：