新闻列表响应式布局方法

一、准备工作

1.js部分

响应式布局处理字体是很令人烦恼的过程，所以是不是可以利用jq的resize事件来自适应字体

function sizeAuto(){
    var num = $(window).width() / 1000; // 通过屏幕宽度获取一个计算值

    if(num < 1) num = 1; // 防止字体太小，计算值不能小于1

    var items = $('[data-size]'); // 获取需要字体自适应的元素

    $.each(items,function(){
        let size = parseInt($(this).attr('data-size')); // 获取字体大小
        
        // 使用计算值得出实际大小，然后设置
        let res = size * num;
        res += 'px';
        this.style.setProperty('font-size', res, 'important')
    })
}
sizeAuto()
$(window).resize(sizeAuto)

2.css部分

清除掉html默认的margin、padding和font-size，好处是可以让布局更精确，弊端是每次要看文字效果都要设置font-size

也可以使用data-size自适应字体

*{
    margin: 0;
    padding: 0;
    font-size: 0;
}

给html和body设置宽高为100%，是为了让子元素能继承从而运用百分比进行布局。设置最小宽度是防止页面崩掉

html, body{
    width: 100%;
    height: 100%;
    min-width: 300px;
}

给img设置宽度为100%，这样把img放在div里调整就会很方便

img{
    width: 100%
}

二、标题部分

1.html

在准备工作的js部分定义了属性data-size，可以用来自适应字体

<div id="title" data-size="50">新闻</div>

2.css

#title{
    margin: 3% 0;
    text-align: center;
}

三、内容部分

1.大致布局

每个模块的宽高不好调整，所以可以利用图片来大致布局

1-1.html部分

<div id="main">
    <div class="item">
        <div class="img">
            <img src="images/news.png">
        </div>
    </div>
    <div class="item">
        <div class="img">
            <img src="images/news.png">
        </div>
    </div>
    <div class="item">
        <div class="img">
            <img src="images/news.png">
        </div>
    </div>
    <div class="item" style="opacity: 0;"></div>
</div>

1-2.css部分

.item里的position: relative;作用是给2.2.css部分.category里的position: absolute;作参考

#main{
    padding: 0 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item{
    /* 这是无限小数，所以采用calc */
    width: calc(94% / 3);
    margin-bottom: 3%;
    box-shadow: 0 3px 13px rgba(0,0,0,.15);
    /* 给.category做参照 */
    position: relative;
}

@media screen and (max-width: 768px){
    .item{
        width: 48.5%;
    }
}

@media screen and (max-width: 480px){
    .item{
        width: 100%;
    }
}

1-3.效果

全屏：

768px：

480px：

2.文本布局

2-1.html部分

在原先的项目中添加文本内容

.category和.text

<div class="item">
	<div class="category" data-size="15">类别</div>
    <div class="img">
        <img src="images/news.png">
    </div>
    <div class="text">
        <div class="date" data-size="14">2020-08-21</div>
        <div class="title" data-size="25">标题</div>
        <div class="description" data-size="15">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</div>
    </div>
</div>

2-2.css部分

在原先的基础上添加以下代码：

.category{
    position: absolute;
    right: 10%;
    padding: 3% 5%;
    border-radius: 0 0 7px 7px;
    background: #fff;
}

.text{
    padding: 3%;
}

.date{
    color: #999;
}

.title{
    margin: 3% 0;
}

2-3.效果

全屏：

768px：

480px：