viewport和media query - huangxi－IT工程師數位筆記本

文章出處

viewport:

你可以定義viewport的寬度.如果你不使用width=device-width,在移動端上你的頁面延伸會超過視窗布局的寬度(width=980px),如果你使用了width=device-width,你的頁面將會顯示為合適的移動端寬度(width=320px),我們可以使用meta標記:

viewport - target-densitydpi

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

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

viewport - scaling

在大多數手機上,默認的縮放在手機瀏覽器上可能會觸發"zoom".為了阻止用戶縮放,你可以設置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) {