关于css控制div的缩放问题

html-css08

关于css控制div的缩放问题,第1张

比如,建立4个div,要实现宽度随窗口变化而变化很简单,把宽度设成百分比形式就可以了。

css这样写:

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。

我们可以借用一个不常见的属性,padding-bottom属性。

从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。

所以我们的css如果这样写:

我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值

感觉像是个雷啊

今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。

css不完美的,看看这个文章:www.2cto.com/kf/201409/330076.html

应该用js取得宽度再用确定的宽高根据宽度算出高度,有些不能除尽的情况下有1px的差距。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

<title>测试页面</title>

<style type="text/css">

div {

width: 600px

text-align: center

font-size: 4em

color: #333

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script type="text/javascript">

$(function() {

var r = document.body.offsetWidth / window.screen.availWidth

$(document.body).css("-webkit-transform","scale(" + r + ")")

})

$(window).resize(function() {

var r = document.body.offsetWidth / window.screen.availWidth

$(document.body).css("-webkit-transform","scale(" + r + ")")

})

</script>

</head>

<body>

<div>改变窗口大小试试,你会发现什么?</div>

</body>

</html>