1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下p的高度和宽度,具体的设置看你响应式想怎么显示
@media only screen and (min-width: 100px) and (max-width: 0px) {
div{width: 100px;
height: 100px;
}}@media only screen and (min-width: 1px) and (max-width: 7px) {
div{width: 200px;
height: 200px;
}}2.方案二:百分比来做,这里需要运用一个小技巧,padding用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,
设置个padding-bottom
height:0;
width:50%;
padding-bottom:30%
那么这个div的高宽比就是30%:50%
相关推荐：下载本文