What is the principle of fluid layout in mobile layout

This time I will bring you what is the principle of fluid layout in mobile layout, what are the precautions when using fluid layout in mobile layout, the following is a practical case, let’s take a look one time.

Percent layout, also called fluid layout, because the width is a percentage, but the height is written in 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来实现

I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!

Related reading:

Notification bar script startup tool written in Python

How to make a decision tree in javascript

JS implements Bayesian classifier

Use flv.js and video.js to create a live video effect

The above is the detailed content of What is the principle of fluid layout in mobile layout. For more information, please follow other related articles on the PHP Chinese website!