前端之家收集整理的这篇文章主要介绍了
H5页面布局，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<table class="text"><tbody><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
查询，em布局，flex布局，rem布局
经过实践，发现：
百分比布局在
页面布局比较精细的时候容易受限制；
媒体
查询太过繁琐，并且没有平滑流畅的兼容
效果；
em布局不够灵活；
flex布局存在兼容问题；
rem布局则可以很好的兼容各个不同的屏幕分辩率。
具体的实现方式是，将
页面的基础字体大小设置为100，基础宽度设为1080
$baseFontSize:100;
$designWidth:1080;
$baseWidth:1080;
$maxWidth:750px;
@function px2rem($px){
@return ($px/$baseFontSize)*($baseWidth/$designWidth)+rem;
}
通过使用sass
函数将px转换为对应的rem值，这样一来，即可在不同宽度的
页面上实现平滑的适应。
但，这里有一个需要重点思考的情况，rem只实现了在宽度上的自适应，当宽度一定，而高度变化的情况下，rem布局则无法很好的适应了。
比如，uc浏览器的上下状态栏会将
页面高度顶掉一部分，导致
页面高度不够等。因此，要兼容高度变化的情况，对应的
解决方式有：
1、高度使用百分比
2、将主要
内容垂直居中
显示
3、出现滚动条（一般不用）
具体使用哪种
方法要视情况而定，以上就是我目前能想到的h5最方便快捷的布局方式了。 原文链接：https://www.f2er.com/note/421547.html
