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.onload = 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 获取视口的高度
来源: http://www.jianshu.com/p/59211e5ab5db