VUE-通过设置css样式占位防止页面抖动

前端界面加载的时候,为防止界面抖动,可以用如下设置进行占位

.zhanwei{
    overflow: hidden;
    width:100%;
    height: 0px;
    padding-bottom: 25%;
}

padding-bottom: 25%;代表按宽高比4:1进行占位,这里的宽代表的是父元素的宽度,高代表的25%*父元素的宽度的值

应用实例:





  
  
  
  Document
  
  
  



  
这是第1个,宽高600 X 125
这是第2个,宽高300 X 125
这是第3个,宽高200 X 125
高相对于父元素而言,一直都是600 X 25% = 125

效果图:

VUE-通过设置css样式占位防止页面抖动_第1张图片

你可能感兴趣的:(VUE)