前端css技巧---响应式布局

1.列表布局

工作中经常遇到这样的布局效果，一般我们都会采用flex布局实现，简单方便，那除了这种方式还有没有其他方法呢？

当然是有的，代码如下

<!-- HTML -->
<!--父级容器-->
<div class="container">
    <!-- 列表容器 -->
    <ul class="list">
        <!-- 子元素  -->
        <li class="item">
            <!-- 内容 -->
            <div class="content"></div>
        </li>
        <li class="item">
            <div class="content"></div>
        </li>
        <li class="item">
            <div class="content"></div>
        </li>
        <li class="item">
            <div class="content"></div>
        </li>
        <li class="item">
            <div class="content"></div>
        </li>
    </ul>
</div>

/* css */
.container{
    padding: 50px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}
.list{
    padding: 0;
    margin: -30px -30px 0 0;
}
.list::after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.item{
    float: left;
    list-style: none;
    width: 33.333333333%;
    /*  方案2  */
    /*box-sizing: border-box;*/
    /*padding: 30px 30px 0 0;*/
}
.content{
    height: 240px;
    background-color: #0cadb1;
    border-radius: 6px;
    /*  方案1  */
    margin: 30px 30px 0 0;
}

这样布局优点是不会影响其他元素排列，而且间隔可以任意设置，子元素始终贴合内容区域边界，最终呈现效果如下，用来做响应式布局也是不错的选择，前提是内容区域高度一致

2.固定图片高度

在布局过程中设计提供的图片一般都是等比例大小，但是实际生产环境中图片尺寸可能不尽人意，如果固定图片大小又可能会导致图片变形扭曲，如果遇到这种情况可以通过css设置图片样式object-fit来解决，一般值为cover或contain，但是如果图片本身尺寸不一，也不能统一尺寸显示，就需要另外一种解决方：

<!-- HTML -->
<!--父级容器-->
<div class="container">
    <!-- 列表容器 -->
    <ul class="list">
        <!-- 子元素  -->
        <li class="item">
            <!-- 内容 -->
            <div class="content cover" style="background-image: url(images/1813e494ac09497ea77724922063d2d7.jpg)"></div>
        </li>
        <li class="item">
            <div class="content contain" style="background-image: url(images/1813e494ac09497ea77724922063d2d7.jpg)"></div>
        </li>
    </ul>
</div>

/* css */
.cover:after,
.contain:after{
    content: "";
    display: block;
    padding-top: 60%;
}
.cover,
.contain{
    background-position: center;
    background-repeat: no-repeat;
}
.cover{
    background-size: cover;
}
.contain{
    background-size: contain;
}

效果如下

当然也可以不设置伪元素，只要设置了padding-top或者padding-bottom，值为百分比就可以，等于图片的高度除宽度乘100，在页面中显示的大小以自身宽度为基准，可以一定程度解决自适应的问题！

3.文字溢出隐藏

最常见的文字溢出隐藏设置

/* css */
.ell{
    width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

但是使用情况比较单一，只能显示一行文字，而且如果父元素为flex盒模型且元素本身设置了flex: 1时会导致其失效，这时候可以通过以下代码解决：

/* css */
.ell{
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    height: 3em;
    /* 或 */
    max-height: 3em;
}

-webkit-line-clamp为要限制的行数，高度或最大高度为-webkit-line-clamp乘以行高。

本次关于响应式布局的技巧就到这里，如有不足还望各位前辈指正！