纯css实现宽高随浏览器变化而变化-原创手记-慕课网

1.用padding
padding设置百分比时，是相对于浏览器宽度设置的。
思路：将宽度设为百分比，高度为0，设置padding-top为百分比，这样当浏览器宽度变化时，宽高都会变化
缺点：div里面的内容被挤到外边来

<div class="content">
    这是自适应图片
</div>
.content{
    width: 30%;
    height: 0px;
    padding-top: 30%;
    background-color: red;
}

我们可以看到，div里面的字被挤到外边来了
2.用vh，vw实现
vh是viewport hight的缩写，是CSS3新增的单位。1vh表示视口高度的1%
1vw = 视口宽度的1%

<div class="content">
    通过vw，vh实现的正方形</div>
</div>
.content{
    width: 50vw;
    height: 50vw;
    background-color: red;
}

3. 扩展：用js实现

<body>
    <div id="content">
        js实现宽高自适应    </div>
    <script>
        window. = function(){            let content = document.getElementById("content")
            content.style.width = window.innerWidth*0.3 + "px"
            content.style.height = window.innerHeight*0.3 + "px"

            window.onresize = function(){
                content.style.width = window.innerWidth*0.3 + "px"
                content.style.height = window.innerHeight*0.3 + "px"                
            }
            content.style.backgroundColor = "red"
        }    </script></body>

window.onresize 监听视口变化
window.innerWidth 获取视口的宽度
window.innerHeight 获取视口的高度

作者：椰果粒
链接：https://www.jianshu.com/p/59211e5ab5db