响应式布局之案例--常见电商类页面效果-CFANZ编程社区

响应式布局的布局特点为确保一个页面在所有终端上，都能显示出令人满意的效果，用一句话来概括就是一套方案，处处运行。
废话不多说，先来看看页面在移动端和pc端的效果
pc端：
在这里插入图片描述

移动端：
在这里插入图片描述可以看出来，最上面是banner区，左侧导航，右侧内容展示，妥妥的电商平台网页，实现方法就是调整布局的宽高占比、横纵排列以及细节优化。怎么具体实现请看代码：
html部分很简单，只有div盒子以及li标签。

    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
            </div>
            <div>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li>图片</li>
                <li></li>
            </div>
        </div>
    </div>

需要注意的是，除此之外，还需要在meta标签中添加user-scalable=0，功能是禁止缩放，防止出现问题。
css部分采取外部引入的方式，引入两套css代码，一套适配pc端，一套适配宽度在400~600像素的移动端屏幕。引入方式如下：

<link rel="stylesheet" href="css/big.css" 
            media="(min-device-width: 1000px)">
<link rel="stylesheet" href="css/small.css" 
            media="(min-device-width: 400px) and (max-device-width: 600px)">

big.css:

* {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
/* 主轴设置纵向 */
#layout {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
#top {
    width: 100%;
    /* 纵向长度 */
    flex: 0 0 50px;
    margin: 0 auto;
    height: 30px;
    background-color: yellow;
}
#main {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;/*默认*/
}
#main div:first-child {
    /* 此处为横向长度，由于父级默认为横向 */
    flex: 0 0 10%;
    background-color: #f5f5f5;
    list-style: none;
    display: flex;
    flex-wrap: wrap;/*换行*/
    border-left: 1px solid white;
    border-right: 1px solid white;

}
#main div:first-child li{
    flex: 0 0 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid white;
}
#main div:nth-child(2) {
    flex: 0 0 90%;
    background-color: #f5f5f5;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#main div:nth-child(2) li {
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    border-bottom: 1px solid white;
    background-color: yellow;
    margin-top: 10px;
}

pc端的css代码完成之后，切换移动端，将代码cv过去，然后只将尺寸，布局方式等修改即可，毕竟整体结构已经排好，修改内容已经注释，请看代码：

* {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
/* 主轴设置纵向 */
#layout {
    display: flex;
    flex-direction: column;
    /* １.修改宽度为１００％ */
    width: 100%;
    margin: 0 auto;
}
#top {
    width: 100%;
    /* 纵向长度 */
    flex: 0 0 50px;
    margin: 0 auto;
    height: 30px;
    background-color: yellow;
}
#main {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;/*默认*/
    /* ６.图片在分类右侧，布局不合理所以设置换行 */
    flex-wrap: wrap;
}
#main div:first-child {
    /* 此处为横向长度，由于父级默认为横向 */
    /* ２.修改为１００％以换行形式完成纵向 */
    flex: 0 0 100%;
    background-color: #f5f5f5;
    list-style: none;
    display: flex;
    flex-wrap: wrap;/*换行*/
    border-left: 1px solid white;
    border-right: 1px solid white;
    /* ５.由于分类间距过大但是又不是行高的问题所以修改对齐方式 */
    align-content: flex-start;

}
#main div:first-child li{
    /* ３.子对象设为３０％ */
    flex: 0 0 30%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid white;
}
#main div:nth-child(2) {
    /* ４.同样１００％ */
    flex: 0 0 100%;
    background-color: #f5f5f5;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#main div:nth-child(2) li {
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    border-bottom: 1px solid white;
    background-color: yellow;
}