@media與@media? screen手機(jī)網(wǎng)頁(yè)區(qū)別

好吧，理論方面暫時(shí)放在一邊，先看看兩者產(chǎn)生的手機(jī)網(wǎng)頁(yè)視圖有什么不同。

@media與@media? screen手機(jī)網(wǎng)頁(yè)

上圖看出，沒(méi)有任何區(qū)別。沒(méi)錯(cuò)，確實(shí)沒(méi)有任何區(qū)別，因?yàn)锧media與@media? screen的css在手機(jī)設(shè)備里都是有效的。

@media與@media? screen打印網(wǎng)頁(yè)區(qū)別

兩者在手機(jī)設(shè)備上沒(méi)有區(qū)別，在打印設(shè)備上是怎樣的呢？看看如下截圖。

@media打印網(wǎng)頁(yè)

@media? screen打印網(wǎng)頁(yè)

很明顯，兩者的打印效果是不同的。

至此，我們應(yīng)該明白了@media與@media? screen的區(qū)別了吧，沒(méi)錯(cuò)，@media? screen的css在打印設(shè)備里是無(wú)效的，而@media在打印設(shè)備里是有效的，這就是它們的區(qū)別了。

知道了它們的區(qū)別，我們就應(yīng)該懂得如何使用它們了。如果css需要用在打印設(shè)備里，那么就用@media?，否則，就用@media? screen。

不過(guò)這只是籠統(tǒng)的做法，其實(shí)如果把“screen”換為“print”，寫(xiě)為@media? print，那么該css就可用到打印設(shè)備上了，但要注意，@media? print聲明的css只能在打印設(shè)備上有效哦。

通過(guò)此實(shí)例的見(jiàn)解，我們可以舉一反三，對(duì)@media的用法就能更易接受了。下面的知識(shí)擴(kuò)展可以讓你更深入地了解@media的各種用法。

知識(shí)擴(kuò)展

@media only screen and

only(限定某種設(shè)備)
screen 是媒體類型里的一種
and 被稱為關(guān)鍵字，其他關(guān)鍵字還包括 not(排除某種設(shè)備)

/* 常用類型 */
類型 解釋
all?所有設(shè)備
braille?盲文
embossed?盲文打印
handheld?手持設(shè)備
print?文檔打印或打印預(yù)覽模式
projection?項(xiàng)目演示，比如幻燈
screen?彩色電腦屏幕
speech?演講
tty?固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī)
tv?電視

screen一般用的比較多，下面是我自己的嘗試，列出常用的設(shè)備的尺寸，然后給頁(yè)面分了幾個(gè)尺寸的版本。

/* 常用設(shè)備 */
設(shè)備 屏幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

兩種方式

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

意思是當(dāng)屏幕的寬度大于600小于800時(shí)，應(yīng)用styleB.css

b：

@media screen and (max-width: 600px) {  /*當(dāng)屏幕尺寸小于600px時(shí)，應(yīng)用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}

device-aspect-ratio

device-aspect-ratio可以用來(lái)適配特定屏幕長(zhǎng)寬比的設(shè)備，這也是一個(gè)很有用的屬性，比如，我們的頁(yè)面想要對(duì)長(zhǎng)寬比為4:3的普通屏幕定義一種樣式，然后對(duì)于16:9和16:10的寬屏，定義另一種樣式，比如自適應(yīng)寬度和固定寬度：

@media only screen and (device-aspect-ratio:4/3)

準(zhǔn)備工作1：設(shè)置Meta標(biāo)簽

首先我們?cè)谑褂肕edia的時(shí)候需要先設(shè)置下面這段代碼，來(lái)兼容移動(dòng)設(shè)備的展示效果：

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=no">

這段代碼的幾個(gè)參數(shù)解釋：

• width = device-width：寬度等于當(dāng)前設(shè)備的寬度
• height = device-height：高度等于當(dāng)前設(shè)備的高度
• initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）
• minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）
• maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）
• user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁(yè)面）

準(zhǔn)備工作2：加載兼容文件JS

因?yàn)镮E8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個(gè)JS文件，來(lái)保證我們的代碼實(shí)現(xiàn)兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準(zhǔn)備工作3：設(shè)置IE渲染方式默認(rèn)為最高(這部分可以選擇添加也可以不添加)

現(xiàn)在有很多人的IE瀏覽器都升級(jí)到IE9以上了，所以這個(gè)時(shí)候就有又很多詭異的事情發(fā)生了，例如現(xiàn)在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:

為了防止這種情況，我們需要下面這段代碼來(lái)讓IE的文檔模式永遠(yuǎn)都是最新的：

<meta?http-equiv="X-UA-Compatible"?content="IE=edge">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）

<meta?http-equiv="X-UA-Compatible"?content="IE=Edge，chrome=1">

進(jìn)入CSS3 Media寫(xiě)法

我們先來(lái)看下下面這段代碼，估計(jì)很多人在響應(yīng)式的網(wǎng)站CSS很經(jīng)?？吹筋愃葡旅娴倪@段代碼：

@media?screen?and?(max-width:?960px){
????body{
????????background:?#000;
????}
}

這個(gè)應(yīng)該算是一個(gè)media的一個(gè)標(biāo)準(zhǔn)寫(xiě)法，上面這段CSS代碼意思是：當(dāng)頁(yè)面小于960px的時(shí)候執(zhí)行它下面的CSS.這個(gè)應(yīng)該沒(méi)有太大疑問(wèn)。

應(yīng)該有人會(huì)發(fā)現(xiàn)上面這段代碼里面有個(gè)screen，他的意思是在告知設(shè)備在打印頁(yè)面時(shí)使用襯線字體，在屏幕上顯示時(shí)用無(wú)襯線字體。但是目前我發(fā)現(xiàn)很多網(wǎng)站都會(huì)直接省略screen,因?yàn)槟愕木W(wǎng)站可能不需要考慮用戶去打印時(shí)，你可以直接這樣寫(xiě)：

@media?(max-width:?960px){
????body{
????????background:?#000;
????}
}

CSS2 Media用法

其實(shí)并不是只有CSS3才支持Media的用法，早在CSS2開(kāi)始就已經(jīng)支持Media，具體用法，就是在HTML頁(yè)面的head標(biāo)簽中插入如下的一段代碼：

<link?rel="stylesheet"?type="text/css"?media="screen"?href="style.css">

上面其實(shí)是CSS2實(shí)現(xiàn)的襯線用法，那CSS2的media難道就只能支持上面這一個(gè)功能嗎？答案當(dāng)然不是，他還有很多用法。

例如我們想知道現(xiàn)在的移動(dòng)設(shè)備是不是縱向放置的顯示屏，可以這樣寫(xiě)：

<link?rel="stylesheet"?type="text/css"?media="screen?and?(orientation:portrait)"?href="style.css">

我們把第一段的代碼也用CSS2來(lái)實(shí)現(xiàn)，讓它一樣可以讓頁(yè)面寬度小于960的執(zhí)行指定的樣式文件：

<link?rel="stylesheet"?type="text/css"?media="screen?and?(max-width:960px)"?href="style.css">

既然CSS2可以實(shí)現(xiàn)CSS的這個(gè)效果為什么不用這個(gè)方法呢，很多人應(yīng)該會(huì)問(wèn)，但是上面這個(gè)方法，最大的弊端是他會(huì)增加頁(yè)面http的請(qǐng)求次數(shù)，增加了頁(yè)面負(fù)擔(dān)，我們用CSS3把樣式都寫(xiě)在一個(gè)文件里面才是最佳的方法。

回歸CSS3 Media

上面我們大概講了下CSS2的媒體查詢用法，現(xiàn)在我們重新回到CSS3的媒體查詢，在第一段代碼上面我用的是小于960px的尺寸的寫(xiě)法，那現(xiàn)在我們來(lái)實(shí)現(xiàn)等于960px尺寸的代碼：

@media?screen?and?(max-device-width:960px){
????body{
????????background:red;
????}
}

然后就是當(dāng)瀏覽器尺寸大于960px時(shí)候的代碼了：

@media?screen?and?(min-width:960px){
????body{
????????background:orange;
????}
}

我們還可以混合使用上面的用法：

@media?screen?and?(min-width:960px)?and?(max-width:1200px){
????body{
????????background:yellow;
????}
}

上面的這段代碼的意思是當(dāng)頁(yè)面寬度大于960px小于1200px的時(shí)候執(zhí)行下面的CSS。

Media所有參數(shù)匯總

以上就是我們最常需要用到的媒體查詢器的三個(gè)特性，大于，等于，小于的寫(xiě)法。媒體查詢器的全部功能肯定不止這三個(gè)功能，下面是我總結(jié)的它的一些參數(shù)用法解釋：

• width:瀏覽器可視寬度。
• height:瀏覽器可視高度。
• device-width:設(shè)備屏幕的寬度。
• device-height:設(shè)備屏幕的高度。
• orientation:檢測(cè)設(shè)備目前處于橫向還是縱向狀態(tài)。
• aspect-ratio:檢測(cè)瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)
• device-aspect-ratio:檢測(cè)設(shè)備的寬度和高度的比例。
• color:檢測(cè)顏色的位數(shù)。（例如：min-color:32就會(huì)檢測(cè)設(shè)備是否擁有32位顏色）
• color-index:檢查設(shè)備顏色索引表中的顏色，他的值不能是負(fù)數(shù)。
• monochrome:檢測(cè)單色楨緩沖區(qū)域中的每個(gè)像素的位數(shù)。（這個(gè)太高級(jí)，估計(jì)咱很少會(huì)用的到）
• resolution:檢測(cè)屏幕或打印機(jī)的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
• grid：檢測(cè)輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。

注意下順序，如果你把@media (min-width: 768px)寫(xiě)在了下面那么很悲劇，

@media (min-width: 1200){ //>=1200的設(shè)備 }

@media (min-width: 992px){ //>=992的設(shè)備 }

@media (min-width: 768px){ //>=768的設(shè)備 }

因?yàn)槿绻?440,由于1440>768那么你的1200就會(huì)失效。

所以我們用min-width時(shí)，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的設(shè)備 }

@media (max-width: 991px){ //<=991的設(shè)備 }

@media (max-width: 767px){ //<=768的設(shè)備 }

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
    #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
    #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}

720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
    #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}

440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
    #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}

/* 豎屏 */
@media screen and (orientation: portrait) and (max-width: 720px) { 對(duì)應(yīng)樣式 }
 
/* 橫屏 */
@media screen and (orientation: landscape) { 對(duì)應(yīng)樣式 }

上面的代碼中用到了screen ，他的意思是在告知設(shè)備在打印頁(yè)面時(shí)使用襯線字體，在屏幕上顯示時(shí)用無(wú)襯線字體。但是目前我發(fā)現(xiàn)很多網(wǎng)站都會(huì)直接省略screen,因?yàn)槟愕木W(wǎng)站可能不需要考慮用戶去打印時(shí)。

@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的設(shè)備*/
@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1024的設(shè)備*/
@media (min-width: 1280px) {
body{font-size: 22px;}
}
@media (min-width: 1366px) {
body{font-size: 24px;}
}
@media (min-width: 1440px) {
body{font-size: 25px !important;}
}
@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}