什么是媒體查詢

媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度戳表、屏幕比例柬唯、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式东跪，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成子眶。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）坦刀。使用媒體查詢愧沟，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果鲤遥。

1沐寺、媒體查詢操作方式

實際操作為：對設(shè)備提出詢問（稱作表達式）開始，如果表達式結(jié)果為真盖奈，媒體查詢中的CSS被應(yīng)用混坞，如果表達式結(jié)果為假，媒體查詢內(nèi)的CSS將被忽略钢坦。

2究孕、媒體查詢結(jié)構(gòu)

@media all and (min-width:320px) {
body { background-color:blue;}
}

設(shè)備類型（默認為all）

1.jpg

screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
and 被稱為關(guān)鍵字爹凹，其他關(guān)鍵字還包括 not(排除某種設(shè)備)厨诸，only(限定某種設(shè)備)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中逛万。

默認樣式 注意：默認樣式要寫在最前面/* 打印樣式 /@media print {}/ 手機等小屏幕手持設(shè)備 / @media screen and (min-width: 320px) and (max-width: 480px) {}/ 平板之類的寬度 1024 以下設(shè)備 / @media only screen and (min-width: 321px) and (max-width: 1024px) {}/ PC客戶端或大屏幕設(shè)備: 1028px 至更大/ @media only screen and (min-width: 1029px) {}/ 豎屏 /@media screen and (orientation:portrait) and (max-width: 720px) {對應(yīng)樣式}/ 橫屏 */@media screen and (orientation:landscape){對應(yīng)樣式}

2.png

3泳猬、CSS2 Media用法

其實并不是只有CSS3才支持Media的用法，早在CSS2開始就已經(jīng)支持Media宇植，具體用法，就是在HTML頁面的heaad標簽中插入如下的一段代碼
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道現(xiàn)在的移動設(shè)備是不是縱向放置的顯示屏埋心，可以這樣寫：
<link rel=“stylesheet” type=“text/css” media=“screen and (orientation:portrait)” href="style.css">
第一段的代碼也用CSS2來實現(xiàn)指郁，讓它一樣可以讓頁面寬度小于960的執(zhí)行指定的樣式文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

4、常涉及到的css屬性

display; width; float; text-align; font

Responsive Web Design 響應(yīng)式網(wǎng)頁設(shè)計

1拷呆、常見的布局方案

固定布局：以像素作為頁面的基本單位闲坎，不管設(shè)備屏幕及瀏覽器寬度，只設(shè)計一套尺寸茬斧；可切換的固定布局：同樣以像素作為頁面單位腰懂，參考主流設(shè)備尺寸，設(shè)計幾套不同寬度的布局项秉。通過識別的屏幕尺寸或瀏覽器寬度绣溜，選擇最合適的那套寬度布局；彈性布局：以百分比作為頁面的基本單位娄蔼，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度怖喻，并能完美利用有效空間展現(xiàn)最佳效果底哗；混合布局：同彈性布局類似，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度锚沸，并能完美利用有效空間展現(xiàn)最佳效果跋选；只是混合像素、和百分比兩種單位作為頁面單位哗蜈。布局響應(yīng)：對頁面進行響應(yīng)式的設(shè)計實現(xiàn)前标，需要對相同內(nèi)容進行不同寬度的布局設(shè)計，有兩種方式：pc優(yōu)先（從pc端開始向下設(shè)計）距潘；
移動優(yōu)先（從移動端向上設(shè)計）候生；?無論基于那種模式的設(shè)計，要兼容所有設(shè)備绽昼，布局響應(yīng)時不可避免地需要對模塊布局做一些變化（發(fā)生布局改變的臨界點稱之為斷點）唯鸭，

2、響應(yīng)式布局方案

（1）模塊中內(nèi)容：擠壓－拉（布局不變）

3.png

（2）模塊中內(nèi)容：換行－平鋪（布局不變）

4.png

（3）模塊中內(nèi)容：刪減－增加（布局不變）

5.png

（4）模塊位置變換（布局改變）

6.png

（5）模塊展示方式改變：隱藏－展開（布局改變）

7.png

（6）模塊數(shù)量改變：刪減－增加（布局改變）

8.png

3硅确、響應(yīng)式布局特點

設(shè)計特點：
面對不同分辨率設(shè)備靈活性強
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點：
兼容各種設(shè)備工作量大目溉，效率低下
代碼累贅，會出現(xiàn)隱藏?zé)o用的元素菱农，加載時間加長
其實這是一種折中性質(zhì)的設(shè)計解決方案缭付，多方面因素影響而達不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

4.Meta標簽的設(shè)置

準備工作：設(shè)置Meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gr;
這段代碼的幾個參數(shù)解釋：
width = device-width：寬度等于當(dāng)前設(shè)備的寬度
initial-scale： 初始的縮放比例（默認設(shè)置為1.0）
minimum-scale：允許用戶縮放到的最小比例（默認設(shè)置為1.0）
maximum-scale：允許用戶縮放到的最大比例（默認設(shè)置為1.0）
user-scalable：用戶是否可以手動縮放（默認設(shè)置為no循未，因為我們不希望用戶放大縮小頁面）

H5頁面窗口自動調(diào)整到設(shè)備寬度陷猫，并禁止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略將頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" />

當(dāng)網(wǎng)站添加到主屏幕快速啟動方式，可隱藏地址欄的妖，僅針對ios的
safari<meta name="apple-mobile-web-app-capable" content="yes" />

將網(wǎng)站添加到主屏幕快速啟動方式绣檬，僅針對ios的safari頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />