在一些特殊的情况中，我们需要实现div随着页面放大缩小。
最近我遇到的一些问题就是在电脑上设计的时候，写死的宽高在浏览器上显示的时候一切正常，但是公司的60寸显示器上却是发生很大的变化，这都是分辨率的不同造成的影响。
这种一般的情况可以根据按照百分比来设置宽高，就可以解决不同分辨率显示的问题。
但是新遇到的一个需求中，需要在一个按百分比设置宽高的div a中，得到一个正方形div b。因为a的宽高在不同显示器上是不固定的，所以我们不能直接设置b ’width：100%；height：100%‘来解决这个问题，如果是简单的赋予相同的固定的高度宽度，在页面大小发生缩放的时候，布局会发生改变，也很影响整体的效果。
下面就是纯css生成正方形的3种方式：
html代码：
<body>
<div style="height: 30%; width: 100%; background-color: yellow;position: relative;">
<div style="background-color: red; width: 30%;padding-top: 30%;height: 0;">
<b style="color: black;font-size: 34px;">通过padding实现的正方形</b></div>
<div style="position: absolute;right:0;top:0;background-color: pink;width: 50%;height: 100%;">
<div style="background-color: blue; height: 25vw; width: 50%;">
<b style="color: white;font-size: 34px;">通过vw，vh实现的正方形</b></div>
</div>
</div>
</body>1.根据padding属性实现正方形。
图中的左侧就是通过padding实现的正方形
padding的属性可能的值有四种类型：
根据组成可以看出padding-top的大小刚好等于宽度，所以在视觉上的效果就是一个正方形，用这种方式有一个不太方便的地方就是这个div中元素会被padding挤到div外。 后面可以用绝对定位的方式实现视觉上的效果。
2.利用vw、vh来实现正方形
在图中 右侧的蓝色正方形就是通过这个方法实现的。
1vw = 1% viewport width
1vh = 1% viewport height。
这里的viewport是指最大的窗口。
<div style="background-color: blue; height: 25vw; width: 50%;">
<b style="color: white;font-size: 34px;">通过vw，vh实现的正方形</b></div>这个div的父级容器的宽度是50%，所以自身的宽度相当于整个窗口的25%，换算成vw的单位就是25vw，所以height：25vw。这样也实现了正方形的效果，而且不会出现元素被挤出div的情况。
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
