我是如何实现移动端布局的

布局其实是一个很玄学的东西，你说会，但是布局出来总感觉缺点什么，要么层级嵌套太复杂，要么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;
}
复制代码

转载于:https://juejin.im/post/5cef85595188256bf8464cf3