作家
字體：小 中 大 |
|
|
|
| 2014/06/11 17:24:16瀏覽401｜回應0｜推薦1 | |
| Media queries，是CSS中一個簡單的過濾器，應用在CSS 樣式中。使用media queries可以簡單達到依據裝置的特性，動態的改變一些顯示上的型式，如寬度、高度、方向等等特性。
Media queries的句法可以依據不同大小裝置上的特性去建立一些特定的原則；句法如下 @media (query) { /* CSS Rules used when query matches */ } 在進行例字的介紹時，還需要介紹一些常會被用來query的attributes。 • min-width：應用於當Browser的寬度會大於等於這個設定值時。 • max-width：應用於當Browser的寬度會小於這個設定值時。 • min-height：應用於當Browser的高度會大於等於這個設定值時。 • max-height：應用於當Browser的高度會小於這個設定值時。 • orientation=portrait：應用於當Browser的高度會大於等於寬度時。 • orientation=landscape：應用於當Browser的高度會小於等於寬度時。 有了以上這些基本attributes的概念時，可以來探討一下接下來範例中一些media queries的用法囉。 Case1：當瑩幕寬度小於640px時，h1裡的字型顏色會改變成紅色，而desc這個段落後方會出現"Browser 寬度小於 640px ! "這些文字; @media (max-width: 640px) { h1 { color: red;} .desc:after {content: "Browser 寬度小於 640px ! ";} } Case2：當瑩幕寬度大於等於640px時，h1裡的字型顏色會改變成藍色，而desc這個段落後方會出現" Browser 寬度至少有 640px !!"這些文字; @media (min-width: 640px) { h1 { color: blue;} .desc: after {content: " Browser 寬度至少有 640px !! ";} } Case3：當瑩幕寬度介於等於500px及600px之中時，h1裡的字型顏色會改變成綠色，而desc這個段落後方會出現"實際上,Browser 寬度介於 500px 與 600px 之間 !!!"這些文字; @media (min-width: 500px) and (max-width: 600px) { h1 { color: green;} .desc: after {content: "實際上,Browser 寬度介於 500px 與 600px 之間 !!!";} } Case4：當瑩幕高度大於等於寬度時，orientation這個段落後方會出現"方向性 = Portrait, 即當高度大於等於寬度時!"這些文字; @media (orientation: portrait) { .orientation:after { content: "方向性 = Portrait, 即當高度大於等於寬度時!";} } Case5：當瑩幕高度小於寬度時，orientation這個段落後方會出現"方向性 =Landscape, 即當高度小於寬度時!"這些文字; @media (orientation: portrait) { .orientation:after { content: "方向性 =Landscape, 即當高度小於寬度時!";} } 範列(media queries) 上面這個範例，請您去執行一下後，再觀察上述提到的5個case是不是有如實的呈些一些變化的效果；透過CSS的設計，就可以很快的達到一些切換大小時的偵測，是不是很方便呢？ 或許有些人會使用到另一種寬度的偵測attribute (*-device-width)，也就是加了device的字眼在裡頭的屬性，這裡是不建議使用這些加入device的attributes，*-width與 *-device-width的差異在於*-width是偵測browser的視窗大小；而 *-device-width偵測的是裝置上的瑩幕的大小。不過在有些特定的需求下有時也用得到*-device-width，例如在各裝置上都不允許視窗的變大變小，此時使用*-device-width或可達到這個目的，因為它只偵測裝置上的瑩幕的大小。 此外在上一篇note02中提到的元素的width儘量避免寫到固定的大小，設定成相對的大小，才能讓設計的頁面可以很流暢地在大大小小的裝置上進行變化，而不會有元素會超過瑩幕的寬度而需要使用者去放大縮小或左移右移的窘況。 最後再提一下三個在media queries部份的小要點 • media queries可用於基於各種裝置的特性而去套用CSS樣式 • 儘量使用min-width (而非min-device-width)來確保廣泛的使用者使用經驗會比較好 • 對於element使用相對的大小以避免破壞顯示的版面 |
|
| ( 知識學習｜隨堂筆記 ) |
