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

weixin_30478619

于 2017-06-13 09:30:00 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/drupal8/p/6999467.html

本文介绍了两种实现自适应布局的方法：响应式布局通过媒体查询调整元素尺寸；百分比布局利用容器宽度百分比设定元素高度。

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%