响应式网页，让div的高和宽保持等比例放大、缩小

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

来源： https://blog.csdn.net/Vivianluolita/article/details/52872252