现在的网页,因为终端产品种类繁多,所以网页自适应已经成了基本要求。
排版的时候,怎么做到自适应的正方形呢。
最初的方法,或是直接写宽度=高度,但是不会随着屏幕自动改变大小。
width:100px;
height:100px;
background:pink;
第二种方法可以用到vw这个单位,表示屏幕宽度,或者vh,表示屏幕高度,数值范围从1—100,表示1%—100%;
width:10vw;
height:10vw;
background:pink;
上面单位也可以写成vh。
第三种方法可以先设置宽度的百分比width:20%,将高度设置为0,然后padding-bottom:20%;可以有同样的效果。
width:20%;
height:0;
padding-bottom:20%;
background:pink;
这里的padding-bottom能不能改成padding-top呢,试一下就知道了,如果改成padding-top,正方形里面的内容会在上方,这是由内容本身的特性决定的。所以这里不能混用,还是老实用padding-bottom好了。