手拉手带你用 Vue3 + VantUI 写一个移动端脚手架 系列二 （页面布局与兼容）

前言

上一篇已经就项目结构和常用插件的配置给大家做了简单的介绍，本篇主要会从移动端页面布局和常见兼容问题展开做讲解，废话不多，马上开始！

页面容器组件

思路

移动端页面一般采用最外层容器固定宽高，内部使用 弹性布局flex 处理，移动端的样式布局建议大家能使用 flex 弹性就使用 flex ，尽量少使用 calc(XX) 计算属性，一方面使用 calc 会有一定的 性能损耗，另一方面看过很多案例使用 calc 通常是配合 100vh 计算页面某一区域的高度，这两者加起来很多时候就会让页面在不同的屏幕下表现不一致，所以为了降低日后的维护负担，还是尽量强迫自己学着用 flex 花式解决布局问题 ^_

为了保持所有页面布局的一致性，也为了日后维护时能统一处理一些兼容性问题，该项目统一封装 <app-page> 组件作为页面容器

关于 100 vh 与 html, body { height: 100% }

首先，这两种方法大家应该都很熟悉，都可以让我们获取一个全屏元素，大家在写代码时也时不时会用到，但是在一些场景下却会产生一些不可预料的问题，所以在选择方案上很重要，这是移动端布局的基础，打好地基很重要，这里我们先看下淘宝的做法