移動端H5知識普及 - CSS3媒體查詢
前些日子，趁平日空隙書寫了類庫系列，這幾天就來“普及”一下移動端HTML5開發的小知識吧~！雖然知識小，但是不得不承認的是，它們很重要~！
本系列共6篇文章，如下爲標題列表：
1 談談相對單位
2 什麼是視口
3 CSS3媒體查詢
4 移動端“百變”盒模型
5 移動端“背景”妙用
6 移動端fixed定位模式
第三篇 CSS3媒體查詢（CSS3 media query）
我們每個人都有自己的屬性，例如年齡、性別、身高、體重等。作爲媒體（電腦、手機、電視、電話），也有它們的特性。CSS3針對所有的媒體均定義了width、color等媒體特性。作爲媒體特性本身，其作用並沒有什麼，但是對於我們來說，我們可以通過檢測媒體的特性確定不同的媒體，從而執行相應處理。那麼此時就涉及到了我們的媒體查詢~
媒體查詢是一些邏輯表達式，用於計算用戶瀏覽器中媒體特性的當前值，如果媒體查詢表達式計算的結果爲true，則應用其所包含的CSS規則。
常見viewport數值
braille ——觸覺反饋設備
embossed ——盲文印刷設備
handheld ——小型或手持設備
print ——打印機
projection ——投影圖像，如幻燈
screen ——計算機顯示器
speech ——語音合成器
tty ——打字機
tv ——電視類
根據不同設備加載不同樣式 demo
有條件地應用樣式
<style>
@import url("main.css") screen; /* 針對屏幕加載main.css */
@media print {
/* 針對打印機的樣式 */
}
</style>
有條件地加載樣式表
<head>
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
<link rel="stylesheet" href="tiny.css" media="handheld"/>
</head>
媒體特性
width 佈局視口寬度
height 佈局視口高度
device-width 設備屏幕寬度
device-height 設備屏幕高度
orientation 設備方向
aspect-ratio 視口寬高比
device-aspect-ratio 屏幕寬高比
resolution 設備像素密度
根據不同媒體特性加載不同樣式 demo
有條件的應用樣式
<style>
@media all and (min-width:500px) { … }
@media (orientation: portrait) { … }
</style>
有條件的加載樣式表
<head>
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
</head>
結束~！
歡迎大家互相學習交流。獨行冰海