移动端布局中的流式布局是什么原理

这次给大家带来移动端布局中的流式布局是什么原理，使用移动端布局中的流式布局的注意事项有哪些，下面就是实战案例，一起来看一下。

百分比布局，也叫流式布局，因为宽度是百分比，但是高度是按px来写的

适用页面特点：左侧固定+右侧自适应 左右固定宽度+中间自适应（专业一点说法：关键元素高宽和位置都不变，只有容器元素在做伸缩变换）
开发思路：
自适应意味着百分比（0% - 100%) -> 思考：如何确定是不是自适应？
1. 多列等分 -> 百分比等分
2. 左侧固定宽度 + 右侧自适应宽度 
    思路一 -> 左侧左浮动+右侧利用BFC特性在右侧
    思路二 -> 父级给padding-left，预留出来左侧区域的宽度，左侧用绝对定位上去，右侧用百分百宽度
3. 左侧自适应 + 右侧固定宽度
    思路一 -> 左侧用百分百宽度,右侧用绝对定位上去
4. 左右固定宽度 + 中间自适应
    思路一 -> 左侧左浮动 + 中间百分之百（中间部分再分为左侧百分之百+右侧右浮动）
    思路二 -> 左侧左浮动 + 中间百分之百 + 右侧右浮动 （负margin法减掉左右侧）
    思路三 -> 左右绝对定位 + 中间百分之百（父元素padding-left,padding-right预留左右侧的位置）
5. 左中右全自适应 -> 全部用百分比
6. font-size、padding,margin,height直接量像素
7. 小的地方可以用display:inline-block;让几个容器放在一排
8. 小图标之类的，可以考虑用::before,::after来实现

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

Python编写的通知栏脚本启动工具

javascript怎样做出决策树

JS实现贝叶斯分类器

使用flv.js与video.js做一个视频直播效果

Atas ialah kandungan terperinci 移动端布局中的流式布局是什么原理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!