移动端布局中的流式布局是什么原理
程序员文章站
2022-03-14 18:50:19
...
这次给大家带来移动端布局中的流式布局是什么原理,使用移动端布局中的流式布局的注意事项有哪些,下面就是实战案例,一起来看一下。
百分比布局,也叫流式布局,因为宽度是百分比,但是高度是按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来实现
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是移动端布局中的流式布局是什么原理的详细内容,更多请关注其它相关文章!