我是如何實現移動端佈局的

佈局實際上是一個很玄學的東西，你說會，可是佈局出來總感受缺點什麼，要麼層級嵌套太複雜，要麼class名太多，都想不出來名字。個人佈局其實也通常，可是經過最近幾個項目的鍛鍊，我本身總結了一套的移動佈局的實現的方法。核心是百分比+rem

準備工做，初始化css

html{
    font-size:26.67vw;
}
html,body,#app{
    width:100%；
    height:100%;
}
複製代碼

這裏最關鍵的一句話就是那個font-size，26.67是如何算出來的呢。首先，咱們拿到設計稿，例如設計稿寬度是375px。咱們知道屏幕的寬度是100vw,因此1vw=3.75px,那麼1px約等於0.2667vw，咱們再假設1rem=100px，所以就能夠得出html的根字體大小，26.67vw.

p{
/* 字體大小約等於16像素*/
    font-size:.16rem;
}
複製代碼

固然，這個方法也不是萬能的，實踐中，會有1-2px的偏差，我以爲仍是能夠接受的。 我這個方法還有個好處，就是能夠實現pc和移動端同時兼容。咱們能夠經過媒體查詢，重設根字體大小來實現兼容pc端，固然不是那麼好看。建議出圖的時候就出2套，經過nginx去判斷，跳轉，能夠參見我以前的博文經過userAgent切換訪問地址的3種方法

@media screen and (min-width:768px) {
    html {
        font-size: 100px;
    }
}
複製代碼

彈性盒

在個人實踐中，彈性盒如今已經兼容的很好了，尤爲是移動端上的IE---UC。 這樣的寫法在某些版本UC種，文字會偏下，建議直接使用彈性盒解決

/*某些UC中不兼容*/
p{
    height:.2rem;
    line-height:.2rem;
}
/*兼容性較好*/
p{
   display:flex;
   justify-content:center;
   align-items:center;
}
複製代碼

經常使用的聖盃佈局,須要注意：從html開始檢查，元素須要有寬高。上部和底部須要設定固定高，中間flex:1;

.wrap{
    width:100%；
    height:100%;
    display:flex;
    flex-direction: column;
   justify-content: space-between
   
}
.top,.bottom{
    height:1rem;
}
.middle{
    flex:1;
}
複製代碼