css怎麼實現響應式佈局-css教學-PHP中文網

css怎麼實現響應式佈局

青灯夜游

發布： 2023-01-06 11:12:52

原創

13494 人瀏覽過

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;
}

登入後複製

優點

寫法簡單

缺點

中間有內容時，無法繼續縮
#寬度會被定死，網頁寬度小於定的寬度時，下面可滑動

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依序寫
壓縮變小之後，產生換行
中間內容不會消失

解決方式

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

登入後複製

第三個問題

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

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

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