@media的使用

標籤：tty   sse   img   font   www   windows   diff   裝置   idt   

[email protected]規則

1.1媒體類型：

  all:匹配所有裝置；

  handle:匹配手持功能(小螢幕、單色、頻寬有限)；

  print:匹配分頁媒體或預覽列印模式下的螢幕；

  screen:匹配彩色電腦螢幕；

  其他媒體類型還有braille(盲文點字觸覺反饋裝置)、embossed(盲文分頁印表機)、projection(投影儀)、speech(語音合成器)、tty(電話機螢幕等固定寬度字元柵格裝置)和tv(電視機)。

  詳細瞭解CSS2.1標準

1.2常用媒體特性：

  min-device-width和max-device-width:匹配裝置螢幕的尺寸；

  min-width和max-width:匹配視口的寬度，如瀏覽器寬度；

  orientation(值為portrait和landscape):匹配裝置是橫屏還是豎屏。

1.3邏輯運算：and、not、or

1.4關鍵字：all 、 only 

 

2.<link>標籤的media屬性

可以通過link標籤中的media屬性，有選擇的載入樣式表。

<link type="text/css" media="print" href="css/print_style.css" /><link type="text/css" media="screen and (max-width:568px)" href="css/iphone_style.css" />

3.斷點

@media screen and  (max-width:640px){ /*CSS規則*/}

個人認為不要針對某一款裝置，來設定樣式，而是要在發現樣式不合適時設定。

Andriod、IOS和Windows裝置媒體查詢

media掃盲文

 

4.走進devicePixelRatio：

devicePixelRatio指window.devicePicelRatio。

devicePixelRatio = 物理像素 / 裝置獨立像素。

非視網膜螢幕裝置，window.devicePixelRatio=1。

實際測試

4.1.瀏覽器

我電腦上的chrome瀏覽器（版本 51.0.2704.106 m），彈出1：

FF瀏覽器（48.0.2）：

4.2.IOS

無視網膜裝置為1，視網膜裝置為2。

4.3.Android沒有固定值

 

總結：

IOS裝置：screen.width * devicePixelRatio = 物理像素。

Andriod：screen.width / devicePicelRatio = 裝置獨立像素。

 

@media的使用