回應式設計

2023 iThome 鐵人賽

DAY 6

自我挑戰組

線上商店串接tappay系列第 6 篇

15th鐵人賽

Kaycyy

2023-09-21 21:48:20

257 瀏覽

分享至

回應式設計就是為了讓我們設計的網頁能在不同大小的螢幕都能正常顯示，所以使用CSS media query來使區塊自動調整版面，例如希望相素在小於1250px時使用一種css設定，而在小於500px套用另一種設定

@media(max-width:1250px){
    /*螢幕寬度小於1250px，套用這個區塊*/
    .list{
        flex-wrap:wrap;
    }
    .product{
        width:45%;
    }
}

@media(max-width:500px){
    /*螢幕寬度小於500px，套用這個區塊*/
    .headline{
        font-size:20px;
    }
    .desktop-menu{
        display: none;
    }
    .mobile-menu{
        display:block;
    }
    .product{
        width:90%;
    }
}

其中`flex-wrap:wrap;`用於控制 flex 容器內的項目是否應該自動換行，也就是在螢幕小於1250px時，塞佈下的區塊會自動往下掉。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width-device-width,initial-scale-1.0"/>
        <meta charset="utf-8"/>
        <title>回應式網頁切版</title>   
        <link rel="stylesheet"type="text/css"href="rwd-layout.css"/>
    </head>
    <body>
        <div class="headline">這是一個回應是網頁範例</div>
       <div class="desktop-menu">選項1,選項2,選項3</div>
       <div class="mobile-menu">
            <img src="menu.png" width="30"height="30"/>
        </div>
        <div class="list">
            <div class="product">product 1</div>
            <div class="product">product 2</div>
            <div class="product">product 3</div>
            <div class="product">product 4</div>
       </div>
    </body>
</html>

.headline{
    font-size:30px;font-weight:bold;
    margin: bottom 15px;text-align: center;
}
.desktop-menu{
    text-align:center;
    display: block;
}
.mobile-menu{
    text-align:center;
    display:none;
}
.list{
    display:flex;justify-content: center;
}
.product{
    flex:none;
    width:280px;
    margin:10px;
    background-color: #ffcccc;
}
@media(max-width:1250px){
    /*螢幕寬度小於1250px，套用這個區塊*/
    .list{
        flex-wrap:wrap;
    }
    .product{
        width:45%;
    }
}

@media(max-width:500px){
    /*螢幕寬度小於500px，套用這個區塊*/
    .headline{
        font-size:20px;
    }
    .desktop-menu{
        display: none;
    }
    .mobile-menu{
        display:block;
    }
    .product{
        width:90%;
    }
}