iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
2

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

Media Query[1]

它是由一個 media type [2] 和 media feature 的條件式組成。條件式的結果,不是 true 就是 false

有幾個地方可以使用

在 html 插入 css 時加條件。

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

在 css 插入 css 時加條件。

@import url(color.css) screen and (color);

在使用 css 時加條件

@media all and (min-width:500px) { ... }
@media (min-width:500px) { ... }

media type 是 all 時,可以省略。

@media (orientation: portrait) { ... }
@media all and (orientation: portrait) { ... }

@media 的條件可以用 ,and 組成。

  • , 和 CSS 的 Combinators 一樣
  • and 就是「邏輯 AND」
@media screen and (color), projection and (color) { ... }

如果沒有給 media type 和 條件式,結果 always true

@media all { ... }
@media { ... }

在寫 media query 一開始,可以用 not 做「邏輯 NOT」

<link rel="stylesheet" media="not screen and (color)" href="example.css" />
@media not screen and (color) { ... }

對於比較舊的 CSS 可以用 only 給 IE

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

可以在 @import 時加上 media query 的條件

@import url(example.css) screen and (color), projection and (color);

使用時要注意 media type 和 media feature 的單位是否匹配,若不適用會使結果變成 false

Media features

雖然 media query 在撰寫時,有一種在寫 css 的感覺。但是們還是有一些要注意的地方

  • 內容是「輸出設備的要求」
    • ex: 對 screen 會要求
      • 長寬比 device-aspect-ratio: 16/9
      • 螢幕解析度寬 max-width: 1366px
    • ex: 對 print 會要求(和螢幕的要求不同)
      • 點密度 min-resolution: 118dpcm
  • 不可以使用 >< 取代常出現的 max-min- 前綴字。
  • 常使用 max-min- 前綴字的屬性也可以單獨使用
  • 可以只有屬性,也可以指定值(0可以不給單位)
  • 使用 max-min- 的前綴字時,一定要給值才有作用
  • 不可以使用 calc(),只能在一個屬性後面給一個簡單的值。

有這些 Media features 可以使用

media feature value Applies to which media type prefixes
width length visual, tactile yes
height length visual, tactile yes
device-width length visual, tactile yes
device-height length visual, tactile yes
orientation "portrait", "landscape" bitmap no
aspect-ratio "ratio" bitmap yes
device-aspect-ratio "ratio" bitmap yes
color integer visual yes
color-index integer visual yes
monochrome integer visual yes
resolution resolution bitmap yes
scan "progressive", "interlace" tv no
grid integer(1 or 0) visual, tactile no
  • width/height: 可視區大小
  • device-width/device-height: 單一螢幕大小
  • orientation: 橫向/縱向顯示
    • @media all and (orientation:portrait) { … }
    • @media all and (orientation:landscape) { … }
  • aspect-ratio: width/height 視窗寬高比
  • device-aspect-ratio: device-width/device-height 設備寬高比
    • @media screen and (device-aspect-ratio: 16/9) { … }
    • @media screen and (device-aspect-ratio: 32/18) { … }
    • @media screen and (device-aspect-ratio: 1280/720) { … }
    • @media screen and (device-aspect-ratio: 2560/1440) { … }
  • color: 在彩色顯示器中,值代表每個顏色至少幾bit
    • @media all and (color) { … }
      @media all and (min-color: 1) { … }
  • color-index: 自訂調色盤(顏色查表法)大小
    • @media all and (color-index) { … }
    • @media all and (min-color-index: 1) { … }
    • <?xml-stylesheet media="all and (min-color-index: 256)" href="http://www.example.com/…" ?>
  • monochrome: 在單色顯示器中,值代表每個像素幾bit
    • @media all and (monochrome) { … } 黑白畫面
    • @media all and (min-monochrome: 2) { … }
    • <link rel="stylesheet" media="print and (color)" href="http://…" />
      <link rel="stylesheet" media="print and (monochrome)" href="http://…" />
  • resolution: pixel 密度(dpi 或 dpcm)
    • @media print and (min-resolution: 300dpi) { … }
    • @media print and (min-resolution: 118dpcm) { … }
  • scan: 顯示器掃描線的方式,其值等同於 1080i 和 1080p 的字尾英文意思
    • @media tv and (scan: progressive) { … }
  • grid: 像是 terminal 或者是固定寬度字體的顯示方式
    • @media handheld and (grid) and (max-width: 15em) { … }
    • @media handheld and (grid) and (device-max-height: 7em) { … }

常見的應用

例子1: RWD (以 bootstrap 為例)

桌機版

手機版

來看看這個 `.col-sm-8

.col,  /*...*/.col-sm-8 /*...*/ {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 576px) {
/* ... */
    .col-sm-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
/* ... */
}

.col-sm-8 預設是寬度 100%,
是在任何的 media 中可視區 576px 以上,最大寬度改成 66.666667%;

例子2: 瀏覽與預覽列印

找一個頁面來看看

進入列印的預覽

發現不同了嗎?

來看看 CSS 發現側邊欄 #mw-navigation 和其它的 selector 在列印中有設定隱藏。

@media print {
    .noprint,
    .catlinks,
    .magnify,
    .mw-cite-backlink,
    .mw-jump,
    .mw-editsection,
    .mw-editsection-like,
    .mw-hidden-catlinks,
    .mw-indicators,
    .mw-redirectedfrom,
    .patrollink,
    .usermessage,
    #column-one,
    #footer-places,
    #jump-to-nav,
    #mw-navigation,
    #siteNotice,
    #f-poweredbyico,
    #f-copyrightico,
    li#about,
    li#disclaimer,
    li#mobileview,
    li#privacy {
        display: none
    }
    /* ... */
}

參考資料

[1]: Media Queries - w3.org
[2]: 7 Media types - w3.org


上一篇
前端新手村 flex grow & shrink 演算法
下一篇
前端新手村 Transition
系列文
前端新手村30

1 則留言

0
小艾 ( iris )
iT邦新手 5 級 ‧ 2018-01-09 13:21:55

我又來勘誤了XD

  • 什麼?的內容是「輸出設備的要求」。
Chris iT邦新手 5 級 ‧ 2018-01-09 15:55:19 檢舉

感謝超認真的 iris。
這次特別針對這一段修正錯誤之外,還外加解釋上去囉~^^

  • 內容是「輸出設備的要求」
    • ex: 對 screen 會要求
      • 長寬比 device-aspect-ratio: 16/9
      • 螢幕解析度寬 max-width: 1366px
    • ex: 對 printer 會要求(和螢幕的要求不同)
      • 點密度 min-resolution: 118dpcm

我要留言

立即登入留言