모바일 레이아웃의 유동 레이아웃 원리는 무엇입니까?

이번에는 모바일 레이아웃의 유동 레이아웃 원리와 모바일 레이아웃에서 유동 레이아웃을 사용할 때의 주의 사항에 대해 알려드리겠습니다.

폭은 백분율이지만 높이는 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를 비디오와 함께 사용 .js를 사용하여 라이브 비디오 효과 만들기

위 내용은 모바일 레이아웃의 유동 레이아웃 원리는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!