媒體查詢結合rem實現移動端佈局

第一步：先寫好重置的樣式。直接複製粘貼便可

@media all and (max-width: 320px){
        html{
            font-size: 12px;
        }
    }
    @media all and (min-width: 321px) and (max-width: 375px){
        html{
            font-size: 14px;
        }
    }
    @media all and (min-width:376px){
        html{
            font-size: 16px;
        }
    }

@charset "utf-8";
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0;}
section,article,aside,header,footer,main,nav,hgroup{display:block;}
a,u{text-decoration:none;}
em,i{font-style:normal;}
b,strong{font-weight:normal;}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
body{font-family: "微軟雅黑"}
input{outline:none;}
img{border:0;display:block;}

寫移動端另外加上的

*{box-sizing:border-box;}
body,html{height:100%;}
body{display: flex;flex-direction: column;}

在head裏，style外需加上下面一句。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

第二步：寫頭部

頭部html

<header>
            <span>熱點</span>
            <span>關注</span>
    </header>

頭部style

header{
        height:3.67rem; 
        background: #0dc441;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header span{
        width: 5.04rem;
        height: 2.04rem;
        background: gray;
        color:#fff;
        text-align: center;
        line-height: 2.04rem;
    }

兩個span的共同點寫完了，接着分別微調不同的地方

header span:nth-child(1){
        border-radius: 1rem 0 0 1rem;
        background: #64d985;
    }
    header span:nth-child(2){
        border-radius: 0 1rem 1rem 0;
        background: #3dd067;    
    }

第三部，寫導航nav

導航html。這裏的class類名是點擊效果。由於還沒涉及js，暫時就先寫成這樣

<nav>
            <li class="active">足球生活</li>
            <li>足球生活</li>
            <li>足球生活</li>
    </nav>

導航style。由於每一個li寬度同樣，因此能夠給nav定義成彈性盒，而後在主軸分散對齊，側軸居中對齊。隨後作了個點擊後變化的效果

nav{
        height: 2.96rem;
        display: flex;
        background: yellow;
        border-bottom: 1px solid #d9d9d9;
    }
    nav li{
        flex: 1;
        line-height: 2.96rem;
        text-align: center; 
        color:#666666;
    }
    nav li:active{
        color: #0dc441;
        border-bottom: 2px solid #0dc441;
    }

第四部：寫底部。由於中間板塊的高度不能夠固定，因此先寫好底部。以後再給中間板塊加上flex：1，將剩餘空間全分配給它。

底部html

<footer>
            <div>
                <span class="iconfont icon-wode"></span>
                <i>首頁</i>
            </div>
            <div>
                <span class="iconfont icon-wode"></span>
                <i>首頁</i>
            </div>
            <div>
                <img src="images/xiangji_03.png" alt="">
            </div>
            <div>
                <span class="iconfont icon-wode"></span>
                <i>首頁</i>
            </div>
            <div>
                <span class="iconfont icon-wode"></span>
                <i>首頁</i>
            </div>
    </footer>

##底部style

footer{
            height: 3.625rem;
            background: pink;
        }
    footer{
        display: flex;
        justify-content: space-around;
        border: 1px solid #cbd7cc;
    }
    footer div{
        height: 3.625rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    footer div:nth-child(3){
        position: relative;
    }
    footer div:nth-child(3) img{
        position: absolute;
        bottom: 0;
    }

第五步：寫主要內容板塊。光給main分配剩餘空間還不夠，中間板塊的內容仍是會把頭和底擠掉。需得給article也加彈性盒。當寫好以後，發現中間板塊無法滑動，需得在main那加上overflow：auto

<main>
        <article>
                <figure>
                    <img src="images/03index_0_02.jpg" alt="">
                    <figcaption>小丸子啊萌萌噠小丸...</figcaption>
                </figure>
        
        </article>
    </main>

main{
        flex: 1;
        overflow: auto;
    }
    
    main article{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;     
    }
    main figure{
        width: 49%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0.4rem;

    }
    main figure img{
        width: 100%;
    }
    main figure figcaption{
        height: 2.5rem;
        border:1px solid #e5e5e5;
        line-height: 2.5rem;
    }

完！