CSS实现一个自适应的正方形的方法示例

传统方法正方形用固定的形式写 直接长=宽写固定的值如下 .box{ width: 200px; height: 200px; background: pink; color: #666; } 但是很多情况下,在移动端的设计里,图片的宽度随着不同的移动设备进行改变的,这个时候就需要用到自适应的正方形的实现。 下面介绍两种比较简单的实现方法: 方法一:CSS3 vw 单位,vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width .box{ width: 20%;//width:20vw也可以 height: 20vw;