css 使用padding 百分比值实现高度自适应(多用于占位,避免闪烁)


.item {
  float: left; margin: 10px 5%; padding-bottom: 33.98%; /*高除以宽*/ width: 21%; height: 0; }
 
demo:  http://jsfiddle.net/luin/25BbH/7/

改变大小始终保持保持恒定的宽高比, 常用于移动端,


//占位 是否可控高度:false(无法控制min-height,但没有多余结构) true(可控制min-height,但要增加结构)
@mixin proporBox($arg:1, $type:false, $ele:':before'){
    position: relative;
    @if $type == true {
        &#{$ele}{
            content: '';
            display: block;
            width: 100%;
            padding-top: percentage($arg);
        }
    }@else{
        padding-top: percentage($arg);
    }   
}

sass



猜你喜欢

转载自blog.csdn.net/qq_36416878/article/details/80364648