html代码如下,
<div class='container'>
<div class='dummy'></div>
<div class='content'>content</div>
</div>
css代码如下,
复制代码
.container{
background-color: silver
width:100%
position:relative
display: inline-block
}
.dummy{
margin-top: 100%
}
.content{
position:absolute
left:0
right:0
top:0
bottom: 0
}
有什么问题你可以去《5 1r gb》看看里面的论坛
接下来分析一下,究竟是如何实现的。首先容器container块内包含了两个div,一个是dummy,这个纯粹是为了实现缩放效果加的,另一个content里面放的是我们真正想要展现的内容。其实原理也很简单,大家都知道div是块元素,它默认就是占一行,宽度本来就是自适应的,所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下,靠的就是前面提到的dummy那个块来实现,dummy只设置了一个css属性,margin-top:100%,相信大家都反应过来了。因为容器宽度已经在那儿了,通过dummy块的margin-top来把整个的高度撑得和宽度一样,当容器宽度改变时,dummy的位置也会改变,进而容器高度就跟着发生了变化。-《http://v.youku.com/v_show/id_XMTMzMjg3MTU3Ng==.html?f=26081534》-
但是,还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到,大家肯定都处理过因为子元素浮动导致父元素高度塌陷,所以这里采用的方法也是类似清除浮动的方法,设置父元素display:inline-block或overflow:hidden。这里说个题外话,不知道大家在使用这两种方法清除浮动的时候有没有过疑问,为什么给父元素这样设置之后就能把父元素高度撑起来呢,准确的原理解释起来有点复杂。可以简单的理解为,当子元素脱离文档流时,父元素不知道子元素的存在,所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时,迫使父元素去检查自己内部有哪些子元素,而这时候就发现了之前absolute定位的子元素,所以高度就撑开了。
这里给dummy块设置margin-top:100%,出来的是个可自适应缩放的正方形,如果需要长方形只需要更改此值即可,比如需要4:3的长方形,则应设为margin-top:75%。
css3有两个新单位,vw和vh,vw表示占用父元素宽度的百分比,vh表示父元素高度的百分比,如20vw表示元素宽度为父元素宽度的百分之二十,你设置宽度和高度都为20vw,就能实现正方形的效果。不过有个bug,就是现在浏览器对css3的支持度不是很大,有些浏览器不支持vh: 相对于视窗的高度, 视窗被均分为100单位的vh
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw
vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
视区:所指为浏览器内部的可视区域大小,
即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
calc是 css3提供的一个在css文件中计算值的函数:
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
一般用来设置流式布局宽高,当然,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值
calc()的兼容性需要注意