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
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦