viewport和media query

viewport:

你能夠定義viewport的寬度.若是你不使用width=device-width,在移動端上你的頁面延伸會超過視窗佈局的寬度(width=980px),若是你使用了width=device-width,你的頁面將會顯示爲合適的移動端寬度(width=320px),咱們能夠使用meta標記:

<meta name="viewport" content="width=device-width">

 

viewport - target-densitydpi

 

 在說這個屬性以前,先說一下pixel-px.以電腦桌面爲例,在同一個顯示器下,不一樣分辨率下有不用顯示,在高分辨率下桌面圖標會顯示得小一些,而低分辨率下圖標會顯示得大一些.

Android 介紹了target-densitydpi.當設置target-densitydpi=device-dpi時,在一樣大的手機屏幕上,圖片和文字在高分辨率的設備上會顯示得小一些,反之,在低分辨率的設備上會顯示得大一些.

 

viewport - scaling

 在大多數手機上,默認的縮放在手機瀏覽器上可能會觸發"zoom".爲了阻止用戶縮放,你能夠設置initial-scale=1.0,下面是移動視窗的完整寫法:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Media Queries

CSS Media Queries - max/min-device-width

max-width and min-width are updated when you rotate the screen, your max-width in portrait mode become max-height in landscape mode

 當你旋轉手機屏幕的時候max-width和min-width就會更新,橫向的最大寬度在縱向上就會變成最大高度,如圖所示:

@media only screen and (min-width : 480px) { .box { width:200px; height:200px; background:yellow; } }

@media only screen and (max-width : 320px) { .box {width:200px; height:200px; background:red; } }

 

 注意:max/min-width和max/min-device-width的區別.

從字面意思來看一個是最大/最小寬度,一個是最大/最小設備寬度.若是設置了width=device-width,在橫屏模式下max/min-width和max/min-device-width是同樣的,可是在縱屏模式下不一樣.簡單來講,就是在你旋轉屏幕時max/min-width將會更新,可是max/min-device-width不會更新.

 

CSS Media Queries - device-pixel-ratio

 device-pixel-ratio能夠讓咱們知道設備屏幕的分辨率,一些手機的像素比會大於等於1.5,若是你想實現高分辨率設備上的佈局,能夠使用下面的media query:

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),

       only screen and (-o-min-device-pixel-ratio: 3/2), 

       only screen and (min-device-pixel-ratio : 1.5) { 

  .imagebox {background:(url:"images/high/demo.jpg");} 

}

 注意:若是使用了上面的方法,即便沒有使用上面的規則圖片同樣會加載.

 

CSS Media Queries - 方向

 iPhone和ipad都有橫屏和豎屏,使用下面的media query能夠分別在橫屏和縱屏上使用相應的css

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  /* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

  /* Styles */

}