css 使用padding 百分比值实现高度自适应（多用于占位，避免闪烁）

最新推荐文章于 2024-09-06 21:32:37 发布

qq_36416878

最新推荐文章于 2024-09-06 21:32:37 发布

阅读量1.1k

点赞数

.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);
    }   
}