CSS の流動的なレイアウトとは、Web ページを縮小または拡大すると、ブラウザのサイズに応じて Web ページのレイアウトが変更されることを意味します。流動的なレイアウトの利点は、ユーザーのウィンドウが小さい場合、横にスクロールしなくてもページがウィンドウに合わせて縮小されることです。
流動的なレイアウト:
簡単に言うと、Web ページを縮小または拡大すると、Web ページのレイアウトもサイズに応じて変化します。ブラウザの！
(学習ビデオ共有: css ビデオ チュートリアル)
利点:
ページはブラウザ ウィンドウ全体に拡大されるため、大きな画面でもscreen では、ページの周囲に空白はありません;
ユーザーのウィンドウが小さい場合、水平方向にスクロールすることなく、ページはウィンドウに合わせて縮小されます;
によって設定されたフォントであっても、ユーザーのサイズがデザイナーのプリセットよりも大きい場合、このデザインを適応させることもできます (ページが伸びる可能性があるため)。
欠点:
ページの各部分の幅が制御されていない場合、ページのデザインは期待される効果とは大きく異なります。たとえば、一部の項目や要素は、一緒に押し込まれ、その周囲に予期せぬ隙間が現れる;
ユーザーのウィンドウが非常に広い場合、テキスト行が長すぎて読みにくい可能性があります;
ユーザーのウィンドウが非常に広い場合は、狭い場合、単語が圧縮される可能性があり、1 行あたりの単語数がわずかになります;
固定幅の要素がボックス内にある場合、それを収容できない場合、要素はボックスからオーバーフローします。
例:
次のコードは、流動的なレイアウトを示しています。主要なテクノロジは、幅の単位をパーセンテージとして設定することです。
<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
<style type="text/css">
* {
color: #fff;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1 id="软件开发-成就梦想">软件开发，成就梦想</h1>
<h2 id="a-nbsp-href-https-www-liyongzhen-com-nbsp-style-color-学编程-上利永贞网-a"><a href="https://www.liyongzhen.com/" style="color:#000">学编程，上利永贞网</a></h2>
<div id="header">
<h1 id="Logo">Logo</h1>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">服务</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>功能</p>
</div>
<div class="article column1">
<p>第一列</p>
</div>
<div class="article column2">
<p>第二列</p>
</div>
<div class="article column3">
<p>第三列</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2019</p>
</div>
</body>
</html>関連する推奨事項: CSS チュートリアル
以上がCSSの流体レイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AMReact Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、
バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AMバックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、
ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AMRequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう
ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AMおそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...
Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです
毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。
ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
Dreamweaver Mac版
ビジュアル Web 開発ツール
