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;