CSSでレスポンシブレイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装する方法: 1. シンプルなコードと便利なレイアウトの利点があるフレックス レイアウトを使用します; 2. レスポンシブ レイアウトを実現するためにメディアと組み合わせた絶対レイアウトを使用します; 3. グリッド レイアウトを使用します, というメリットがあります 書きやすい; 4. 互換性が高いというメリットがある float レイアウトを使用します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

#レスポンシブ レイアウトの 4 つの方法の簡単な紹介

合計 HTML コード

    

        
left
        
中间
        
right
    

ログイン後にコピー

flex Layout

.box{
    width: 100%
    height: 100px;
    display: flex;
}
.left{
    width: 300px;
    background-color: purple;
}
.center{
    flex: 1;
    background-color: pink;
}
.right{
    width: 300px;
    background-color: burlywood;
}

ログイン後にコピー

#真ん中にコンテンツがある場合、最小まで縮小しても小さくなりません

.box{
    position: relative;
    width: 100%;
    height: 100px;
}
.left{
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: pink;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: pink;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: burlywood;
}
@media (max-width: 600px){
    .left,.right{
       /* 平分屏幕 */
        width: 50%;
    }
}

メリット

メディアを組み合わせることでレスポンシブレイアウトが実現可能

デメリット

コード記述が複雑でレイアウトが面倒メディアを使用して分割しない場合画面が均等で、幅が 600 未満の場合、右側が左側を覆います。

• #グリッド レイアウト

• .box{
      display: grid;
      grid-template-columns: 300px 1fr 300px;
      grid-template-rows: 100px;
  }
  .left,.right{
      background-color: pink;
  }
  .center{
      background-color: burlywood;
  }

  ログイン後にコピー

幅は固定されます。ウェブページの幅が固定幅より小さい場合、下部をスライドさせることができます

• フロートレイアウト
  
フローティング フローは右と中央の位置を変更する必要があります

    
left
    
right
    
center

利点

#圧縮が小さくなると改行が生成される##真ん中のコンテンツは消えません

• #解決策

• .box{
      height: 200px;
  }
  .left{
      float: left;
      width: 300px;
      background-color: pink;
  }
  .right{
      float: right;
      width: 300px;
      background-color: pink;
  }
  .center{
      margin:0 300px;
      background-color: burlywood;
  }

  ログイン後にコピー
  
  3 番目の問題#フレックス レイアウトは、内部の高さに基づいて親要素の高さを拡張できます

  グリッド レイアウトは、親要素の高さも拡張できます内部の高さに応じた親要素

  学習ビデオ共有:

  css ビデオ チュートリアル

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