页面布局一

1、设置父div标签的宽高比

.icons{
  // 元素内的内容溢出时隐藏溢出部分
  overflow :hidden  
  // 宽高比为2
  height:0
  padding-bottom:50%
  backgroud: #fff
  width:350px
}

2、子div标签宽高相对于父

 .icon{
    position :relative   //生成相对定位元素，用于子标签
    overflow :hidden  
    float: left 
    height:0  //可以限制子标签溢出
    width: 25%
    padding-bottom :25%
    background: red
  }

3、设置图片完整显示，img标签

  .icon-img-content{
          display:block   
          margin:0 auto  //图片居中
         height: 100%  //显示整个图片
       }
  

4 定义styl文件并且引用

mixins.styl:

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

在vue中引用:

  @import '~styles/mixins.styl'

在class中:

ellipsis()