首頁 > web前端 > css教學 > css怎麼實現響應式佈局

css怎麼實現響應式佈局

青灯夜游
發布: 2023-01-06 11:12:52
原創
13489 人瀏覽過

css實現響應式佈局的方法:1、使用flex佈局,優點是程式碼簡單、佈局方便;2、使用絕對佈局,結合使用media可以實現響應式佈局;3、使用grid佈局,優點是寫法簡單;4、使用float佈局,優點是相容性比較好。

css怎麼實現響應式佈局

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

簡單介紹四種響應式佈局的四種方式

總的html代碼

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>
登入後複製

#flex佈局

.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;
}
登入後複製

優點

  • 程式碼簡單,佈局方便

  • #如果中間有內容,縮到最小就不會在小了
  • 且左右側的寬度變小了

css怎麼實現響應式佈局

絕對佈局

.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%;
    }
}
登入後複製

優點

  • #結合使用media可以實現響應式佈局

缺點

  • 程式碼寫入法複雜,佈局較繁瑣
  • #若不使用media平分螢幕,寬度小於600的情況下,右側會覆蓋左側

grid佈局

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

優點

  • 寫法簡單

缺點

  • 中間有內容時,無法繼續縮
  • #寬度會被定死,網頁寬度小於定的寬度時,下面可滑動
    css怎麼實現響應式佈局

float佈局

浮動流需要將right和center位置換上

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>
登入後複製
.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;
}
登入後複製

優點

  • 比較簡​​單,相容性比較好

缺點

  • #同行浮動的兩塊需要依序寫在一起(即left和right的p依序寫
  • 壓縮變小之後,產生換行
  • 中間內容不會消失
    css怎麼實現響應式佈局

解決方式

@media (max-width: 600px){
      .left,.right{
        width: 50%;
    }
    .center{
        opacity: 0;
    }
}
登入後複製

第三個問題

  • flex佈局可以根據內部的任何一個高度來撐開父元素高度
  • grid佈局也可以根據內部的任何一個高度來撐開父元素高度

學習影片分享:css影片教學

以上是css怎麼實現響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板