首頁  >  文章  >  web前端  >  行動端佈局中的串流佈局是什麼原理

行動端佈局中的串流佈局是什麼原理

php中世界最好的语言
php中世界最好的语言原創
2018-03-12 16:44:583644瀏覽

這次帶給大家行動端佈局中的串流佈局是什麼原理,使用行動端佈局中的串流佈局的注意事項有哪些,下面就是實戰案例,一起來看一下。

百分比佈局,也叫流式佈局,因為寬度是百分比,但是高度是按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做一個直播影片效果

以上是行動端佈局中的串流佈局是什麼原理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn