比如何以用vw（兼容性不太好
标签：
页面加载抖动问题在web开发中，经常会遇到这样一个问题，好比一个宽度百分百，高度自适应的图片，在网速慢的情况下加载过程中会呈现抖动的问题（未加载图片前容器的高度为0，，图片加载完成后下面的内容会被挤下去）。
这种问题如果是图片有固定高度，就不会呈现加载抖动。但一般情况下，为了使图片不被拉伸，高度一般设为自适应，那么为了防备加载抖动，我们需要给图片提前占个位，这里使用的是css的padding-bottom百分比进行占位。
示例代码如下
.img-box{ overflow: hidden; width: 100%; height: 0; padding-bottom: 50%; }这里的50%是图片的高宽比例，切记是相对付父元素宽度的50%（即.img-box的上一级），不是相对付本身的width，详情请看下面的例子。
这里写了一个小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding-bottom</title> <style> .content{ width: 400px; height: 400px; margin: 100px auto; background-color: aquamarine; } .box1{ width: 100%; /* 400px 相对付content的width */ height: 0; padding-bottom: 50%; /* 200px 相对付content的width */ background-color: red; } .box2{ width: 25%; /* 100px 相对付box1的width */ height: 0; padding-bottom: 25%; /* 100px 相对付box1的width */ background-color: yellow; } </style> </head> <body> <div class="content"> <div class="box1"> <div class="box2"></div> </div> </div> </body> </html>如图所示
这种情况下box2中如果有图片宽高比为一比一时（按照padding的百分比），加载过程中就不会呈现抖动的情况，同理box1也是如此。
固然解决抖动还有其他要领，好比何以用vw（兼容性不太好，这里就不列举了），还有好比在微信小措施中rpx，如果图片的设计巨细宽高为750×300时，就可以直接写成height: 300rpx。
css使用padding-bottom百分比进行提前占位，防备抖动
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30173.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")