ホームページ > 記事 > ウェブフロントエンド > CSSの流体レイアウトとは何ですか
CSSの流体レイアウトとは何ですか
- 王林オリジナル
- 2020-11-13 13:44:372530ブラウズ
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 style="color:#706fd3">软件开发，成就梦想</h1>
<h2><a href="https://www.liyongzhen.com/" style="color:#000">学编程，上利永贞网</a></h2>
<div id="header">
<h1>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 サイトの他の関連記事を参照してください。