CSSを使用してレスポンシブレイアウトを実装する方法

この記事で共有した内容は、CSS を使用してレスポンシブ レイアウトを実装する方法に関するもので、困っている友人に役立つことを願っています。

CSSを使用してレスポンシブレイアウトを実装する

レスポンシブレイアウトは非常に高級で難しいように感じますが、実際にはCSSだけを使用してレスポンシブレイアウトを実現することもできます
使用する必要があるのはCSSの未回答のクエリです。その方法は次のとおりです。使用方法:

@media を使用する 3 つの方法

1. CSS ファイルで直接使用する:

@media 类型 and (条件1) and (条件二){
    css样式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

2. @import を使用してインポート

@import url("css/moxie.css") および (max- width:980px);

3. これは最も一般的に使用される方法でもあり、リンク接続を直接使用し、メディア属性を使用してクエリメソッドを設定します

以下は単純なレスポンシブ レイアウトの HTMl コードです:

nbsp;html>


    <meta>
    <title>响应式</title>
    <link>
<link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
    
    <p>底部</p>

以下は CSS ですstyle:

*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow; 
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

スタイル コード

.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

スタイル コード

.left,.center,.right{
    float:none;
    width:100%;
}

ウィンドウが 1024px より大きい場合、コマンドは圧縮され、他の変更は行われません:

ウィンドウが 1024px より小さく、720px より大きい場合、右側の列はフローティングを解除し、下に表示されます:

ウィンドウが 720px 未満の場合、左、中央、右の 3 つの列すべてが非フロート化され、幅が 100% になります:

さて、レイアウトはとてもシンプルです、詳細を把握するには継続的な練習が必要です。

関連する推奨事項:

CSS を使用してマウスを手のスタイルに変更する方法の紹介

CSS ボックス モデルの説明と例

以上がCSSを使用してレスポンシブレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。