响应式布局定义:将弹性网格布局、弹性图片、媒体和媒体查询整合起来,即为响应式布局。
一、媒体查询:支持不同的窗口
基本语法:
@media screen and (max-width:960px){ body{ background-color:red; } }
使用@inport指令可以在当前样式表中按条件引入其他样式表。如下例:
@inport url("phone.css") screen and (max-width:768px);
但是需要注意的是使用@inport方式会增加HTTP请求
媒体查询能够检测的性能有:
width:视口宽度
height:视口高度
device-width:设备屏幕宽度
device-height:设备屏幕高度
orientation:检测设备处于横向还是纵向
aspect-ratio:基于视口宽高比,一个16:9显示的屏可这样定义,aspect-ratio:16/9
device-aspect-ratio:基于设备屏幕宽高比
color:颜色位数,min-color:16,会检测设备是否拥有16位颜色
color-index:设备颜色索引表中的颜色数,必须为非负整数
monochrome:检测单色帧缓冲区中每像素使用位数,必须非负整数
resolution:检测屏幕或打印机分辨率
scan:电视机的扫描方式,值可为,progresssive(逐行扫描),interlace(隔行扫描)
grid:检测输出设备是网络设备还是位图设备
注:上述特性,除scan和grid外,可用min和max创建查询范围。
二、使用流式布局
目标元素宽度 / 上下文元素宽度 = 百分比宽度
在响应式布局中,要放弃使用px,使用em。
IE无法调整使用px作为单位的字体的大小。
em的特点:
1、em的值并不是固定的。
2、em会继承父级元素的字体大小。
rem,也是相对单位:
是相对于HTML的根元素,而不是父元素。
弹性图片:
可以给图片都加上属性,即为图片设置阈值:
img{max-width:100%;} 或 img{max-width:220px;}
max-width属性:
可以给元素加上max-width属性,以限制该元素的最大宽度。
viewport特性,是一个移动专属的Meta值,用于定义视口的各种行为。
layout viewport:布局视口
在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口,这个视口的分辨率接近PC。
visual viewport:视觉视口
手持设备物理屏幕的可视区域,即视觉视口。
ideal viewport:完美视口
完美视口。不用缩放或拖动网页就能很好的进行网页浏览。
viewport特性:
width:
width被用来定义layout viewport的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。
<meta name="viewport" content="width=device-width" />
此时的layout viewport将成为ideal viewport,因为layout viewport宽度与设备视觉视口宽度一致了。
height:
与width类似,但实际上却不常用,因为没有太多的use case。
initial-scale:
如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。
initial-scale用于指定页面的初始缩放比例,假定你这样定义:
<meta name="viewport" content="initial-scale=2" />
那么用户将会看到2倍大小的页面内容。
<meta name="viewport" content="initial-scale=1" />
如上initial-scale也能实现ideal viewport。
maximum-scale:
在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。
minimum-scale:
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。
user-scalable:
如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。
使用方法如下:
<meta name="viewport" content="user-scalable=no" />