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 */
}