CSSの流体レイアウトとは何ですか-CSSチュートリアル-php.cn

CSSの流体レイアウトとは何ですか

王林

リリース： 2020-11-13 13:44:37

オリジナル

2554 人が閲覧しました

CSS の流動的なレイアウトとは、Web ページを縮小または拡大すると、ブラウザのサイズに応じて Web ページのレイアウトが変更されることを意味します。流動的なレイアウトの利点は、ユーザーのウィンドウが小さい場合、横にスクロールしなくてもページがウィンドウに合わせて縮小されることです。

CSSの流体レイアウトとは何ですか

流動的なレイアウト:

簡単に言うと、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>&copy; Copyright 2019</p>
        </div>
    </body>
</html>

ログイン後にコピー

関連する推奨事項: CSS チュートリアル

以上がCSSの流体レイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。