移动端流式布局

移动端，便是在手机上去访问前端页面。

我们都知道在写PC端的前端页面时，需要考虑各种浏览的兼容性。而写移动端也不例外，在移动端里，我们更多的是兼容手机的屏幕大小，毕竟这可能是唯一影响外观的东西。

因此采用流式布局来完成移动端的页面。

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

在写开始写移动端前，会在head标签里面加一个viewport，在这里面，需要设置一些属性值。

width：device-width（设置宽度）
user-scalable：no（是否允许用户自行缩放）
initial-scale：1.0（默认缩放比例）
maximum-scale：1.0（最大缩放比例）
minimum-scale：1.0（最小缩放比例）

在移动端， 流式布局是占有非常重要的位置。而对于流式布局来说，尽量不要给宽度固定值，毕竟给了固定值就不能完美的适配屏幕大小。在流式布局中，宽的值是非常重要的。

这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px。并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用，可以针对不同临界值做额外处理。所以无论怎么看，百分比流式布局都是一种常规+主流的布局方案。 核心原则：文字为流式布局，宽度100%按照屏幕宽度缩放，高度固定px，水平采用百分比，或者固宽+变宽，图片固定大小或者百分比缩放，辅助flex布局 。

所以，今天总结一下经典的流式布局的几种实现方法，方便以后查看。

流式布局的特征：

1. 宽度自适应，高度写死，并不是百分百还原设计图。
2. 图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
3. 一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。

流式布局的优缺点:

1. 优点：大屏幕下显示更多的内容。
2. 缺点：宽屏下比例会有一些不协调， 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

经典的流式布局结构:

• 左侧固定，右侧自适应
• 右侧固定，左侧自适应

左侧固定右侧自适应的三种实现方法:
1.利用bfc块级格式化上下文, 实现左侧固定右侧自适应
(1) 让左边的盒子 float: left;
(2) 让右边的盒子 overflow: hidden;
css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
}
.box-1{
height: 300px;
width: 200px;
background-color: orange;
float: left;
}
.box-2 {
height: 350px;
background-color: blue;
overflow: hidden;
}
</style>

html结构

<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>

2.利用定位实现左侧固定右侧自适应
(1) 给父盒子设置padding-left 值
(2) 给左侧子盒子设置width = padding-left ,并定位到父盒子的padding-left上.
(3) 右侧盒子自适应
css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
position: relative;
padding-left: 200px;
}
.box-1 {
height: 300px;
width: 200px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
.box-2{
height: 350px;
background-color: blue;
}
</style>

html结构

<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>

3.利用flex布局 实现左侧固定右侧自适应
(1) 给父盒子设置display:flex ;
(2) 左侧盒子设置固定宽高 ,右侧盒子设置flex:1 ;
css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
display: flex;
}
.box-1{
height: 300px;
width: 200px;
background-color: orange;
}
.box-2 {
flex: 1;
height: 350px;
background-color: blue;
}
</style>

html结构

<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>

右侧固定左侧自适应的三种实现方法:
1.利用bfc块级格式化上下文, 实现右侧固定左侧自适应
（1） 先从结构上就要让 右盒子 先右浮
（2）再给 left 左盒子, 添加 overflow: hidden;

css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
}
.box-2 {
float: right;
width: 200px;
height: 300px;
background-color: blue;
}
.box-1 {
height: 350px;
background-color: green;
overflow: hidden;
}
</style>

html结构

<div class="box">
<div class="box-2"></div>
<div class="box-1"></div>
</div>

2.利用定位实现右侧固定左侧自适应
(1) 给父盒子设置padding-right 值
(2) 给右侧子盒子设置width = padding-right ,并定位到父盒子的padding-right上.
(3) 左侧盒子自适应

css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
padding-right: 200px;
position: relative;
}
.box-2 {
width: 200px;
height: 300px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
}
.box-1{
height: 350px;
background-color: green;
}
</style>

html结构

<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>

3.利用flex布局 实现右侧固定左侧自适应
(1) 给父盒子设置display:flex ;
(2) 右侧盒子设置固定宽高 ,左侧盒子设置flex:1 ;

css样式

<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
background-color: pink;
display: flex;
}
.box-2 {
float: right;
width: 200px;
height: 300px;
background-color: blue;
}
.box-1 {
height: 350px;
background-color: green;
flex: 1 ;
}

</style>

html结构

<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>

总结
1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化但布局结构不变。
2、设计方法：使用%百分比定义宽度，高度大多是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响用户体验。

• 点赞
• 收藏
• 分享
• 文章举报