モバイルレイアウトにおける流動的なレイアウトの原理は何ですか

php中世界最好的语言
リリース: 2018-03-12 16:44:58
オリジナル
3602 人が閲覧しました

今回は、モバイルレイアウトにおける流体レイアウトの原理と、モバイルレイアウトで流体レイアウトを使用する際の注意事項についてご紹介します。実際の事例を見てみましょう。

パーセンテージ レイアウト。幅はパーセンテージですが、高さは 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 中国語 Web サイトの他の関連記事にも注目してください。

関連記事:

Pythonで書かれた通知バースクリプト起動ツール

JavaScriptで決定木を作成する方法

JSでベイジアン分類器を実装する方法

flv.jsを使用するビデオ.js を使用してライブビデオエフェクトを作成します

以上がモバイルレイアウトにおける流動的なレイアウトの原理は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!