zoom: 3
-moz-transform: scale(3)
-moz-transform-origin: 0 0
}
把整个body放大三倍,缩小同理,改成比1小的数字即可
比如,建立4个div,要实现宽度随窗口变化而变化很简单,把宽度设成百分比形式就可以了。
css这样写:
这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。
我们可以借用一个不常见的属性,padding-bottom属性。
从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写:
我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。
但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值
感觉像是个雷啊
今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。
通过transform:scale(0.6)试试。。。
如果是手机端
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=0.6, user-scalable=0">可以如上通过设置viewport来实现效果