media query

關於手機屏幕尺寸

參考文章:https://github.com/xiangpaopao/blog/issues/8
screen.width和screen.height表示手機的分辨率
window.outerWidth和window.outerHeight指瀏覽器外沿大小(而實際上在有些手機上的顯示顯然很不靠譜，有時比innerWidth和innerHeight還小)
window.innerWidth和window.innerHeight指瀏覽器的視口大小，即實際的網頁顯示範圍

media query

以下代碼

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
#test{ width:10px; height:10px;}@media screen and (min-height: 521px) and (max-height: 530px){ #test{ background-color:green }}@media screen and (min-height: 550px){ #test{ background-color:pink }}

當頁面剛加載時，視口高度爲521px，那麼test會顯示出綠色背景，當瀏覽器爲全屏時，會顯示出粉色背景。因此咱們得出這樣的結論：
media query會隨着視口的改變去渲染網頁，而不是隻在頁面加載時一次性決定網頁樣式。這一點其實在不少media query的demo中都有體現（http://www.webdesignerwall.com/demo/media-queries/）。

使用外聯樣式時如何根據媒體類型選擇樣式文件

這組樣式是用於在PC上經過瀏覽器的尺寸改變來模擬移動端的表現。其意思就是屏幕寬度大於480px就用desktop.css，小於480px就使用andriod.css。

媒體類型

• all
  全部媒體類型
• braille
  用於盲文觸覺反饋裝置
• embossed
  用於分頁的盲人打印機
• handheld
  用於手持設備
• print
  用於打印機
• projection
  用於項目介紹，例如投影儀
• screen
  最先用於彩色計算機屏幕
• speech
  用於語音同步器。注：css2有一個經常使用媒體類型「aural」來實現這一目的
• tty
  用於定寬字符網格（如電報，終端或者顯示兼容有限的便攜設備）。在使用'tty'媒體類型時請勿使用'px'爲單位。
• tv
  用於電視（低分辨率，彩色，滾動能力有限的屏幕，有聲）
  以上設備類型是大小寫敏感的。

媒體類型分類

Media Types	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both

Media features	description	value	Applies to	Accepts min/max
width	輸出設備的目標顯示區域的寬度	length	visual and tactile	yes
height	輸出設備的目標顯示區域的高度	length	visual and tactile	yes
device-width	輸出設備的呈現面的寬度（對於連續媒體，就是屏幕的寬度;對於分頁媒體，指頁的寬度）	length	visual and tactile	yes
device-height	輸出設備的呈現面的高度（對於連續媒體，就是屏幕的高度；對於分頁媒體，指頁的高度）	length	visual and tactile	yes
orientation	若是目標設備的高度大於寬度，那麼就是portrait（肖像），不然就是landscape（風景畫）	portrait/landscape	bitmap	no
aspect-radio	設備的寬高比(width/height)	ratio	bitmap	yes
device-aspect-radio	設備的呈現面寬高比（device-width/device-height）	ratio	bitmap	yes
color	輸出設備每一個彩色份量所佔的位數	integer	visual	yes
color-index	表示顏色查找表中的記錄數，若是設備沒有采用顏色查找表，則該值爲0	integer	visual	yes
monochrome	表示一個單色幀緩衝中每一個像素的位數，若是設備不是單色設置，該值爲0	integer	visual	yes
resolution	輸出設備的分辨率，例如像素的密度。若是查詢非塊狀像素的設備，min-resolution中最小值需和指定值作比較，max-resolution也是同樣。不含min-或max-前綴的resolution不能匹配任何非塊狀像素的設備。	resolution	bitmap	yes
scan	表示電視的掃描過程	progressive/interlace	tv	no
grid	表示網格仍是位圖，若是設備是基於網格的（如tty終端或者只顯示固定字體的電話），該值爲1，不然爲0	integer	visual and tactile	no

來自爲知筆記(Wiz)