文档介绍：响应式布局
什么叫做响应式布局?
也即是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
怎样实现响应式布局?
对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的***@media和***@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。
首先我们要允许网页宽度自动调整
在网页代码的头部,加入一行viewport元标签:
<meta name=”viewpoint” content=”width=device-width,initial-scale=1”>
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1),即网页初始大小占屏幕面积的100%。
下面通过Media Query我们可以得到不同设备屏幕的宽和高,从而我们就可以分别处理了。根据不同的设备屏幕宽度,设置不同的CSS。那么这里有两种方法:
1、外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
当页面宽度大于等于960px时,载入样式表gt-
当页面宽度大于等于600px且小于等于960px时,载入样式表gt-600px-lt-
当页面宽度小于等于600px时,载入样式表lt-
2、样式表中内嵌法
当页面宽度大于等于960px时
当页面宽度大于等于600px且小于等于960px时
当页面宽度小于等于600px时
请注意,我这里还是用到了绝对宽度,如”width:400px;“,严谨地说,这还是不够规范的,当然这还要看具体情况了,如果想完全响应式布局的话,那么就不能使用固定的宽度了,可以设为自动或百分比,如”width:auto;“或”width:xx%;“,另外字体也要设为百分比。
对于布局来说,我们算是搞定了,但页面中的图片和视频也不能忽视。
弹性图片
我们需要为图片设置max-width: 100%和height: auto,来实现其弹性化。
弹性内嵌视频
同样,对于视频我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很好,但我们可以用width: 100%来代替
一、显示器屏幕屏幕比例
目前常见的显示器屏幕比例(长:宽)有四种:
5:4 =
4:3 =
16:10 =
16:9 =
以上屏幕比例越靠后屏幕看起来越“扁”,越靠前看起来越“正"。屏幕尺寸和宽高比例是绝对概念。
二、显示器常见分辨率
再来看一下常见分辨率有哪些,由于显示器分辨