媒體查詢結合rem實現移動端佈局
阿新 • • 發佈:2019-01-14
第一步:先寫好重置的樣式。直接複製貼上即可
@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;
}
完!