媒体查询结合rem实现移动端布局

Posted 2021-02-03 web-learning

第一步：先写好重置的样式。直接复制粘贴即可

    @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" >
            </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" >
                    <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;
    }

完！