viewport和media query_html/css_WEB-ITnose

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) {

/* Styles */

}

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

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

/* Styles */

}