Was ist das Prinzip des flüssigen Layouts im mobilen Layout?

Dieses Mal erkläre ich Ihnen, was das Prinzip des flüssigen Layouts im mobilen Layout ist und welche Vorsichtsmaßnahmen bei der Verwendung des flüssigen Layouts im mobilen Layout gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an . einmal.

Prozent-Layout, auch Fluid-Layout genannt, da die Breite ein Prozentsatz ist, die Höhe jedoch in px angegeben wird

适用页面特点：左侧固定+右侧自适应 左右固定宽度+中间自适应（专业一点说法：关键元素高宽和位置都不变，只有容器元素在做伸缩变换）
开发思路：
自适应意味着百分比（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来实现

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

In Python geschriebenes Benachrichtigungsleisten-Skript-Starttool

So erstellen Sie einen Entscheidungsbaum mit Javascript

JS implementiert den Bayes'schen Klassifikator

Verwenden Sie flv.js und video.js, um einen Live-Videoeffekt zu erstellen

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip des flüssigen Layouts im mobilen Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!