在 css 響應式網格中縮放高度

Question

我已經設置了一個簡單的頁面，其中包含我在 w3schools 上的這篇文章中讀到的響應式 css 網格：

https://www.w3schools.com/css/css_rwd_grid.asp

寬度縮放工作正常。

我有兩件事無法解決：

我在頁面上設置了 960px 的最大寬度，當我使視口變小時，寬度縮放得很好，但是對於頂部的按鈕，我希望它們在頁面處於其位置時具有 125px 的高度最大寬度，然后與寬度成比例縮小。
對於 dummy2 和 dummy3 按鈕，我希望它們在該網格行中具有 50% 的高度。

她是我得到的東西的 jsfiddle： https ://jsfiddle.net/nyehc0g9/

代碼如下：

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        html {
            margin: 0 auto;
            max-width: 960px;
        }
        body {
                background-color: black;
        }
        * 
        {
            box-sizing: border-box;
        }
        .row::after
        {
            content: "";
            clear: both;
            display: table;
        }
        [class*="col-"]
        {
            float: left;
        }
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}

        .button
        {
            background-color: grey;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border:none;
            outline: white solid;
            width: 100%;
        }

        img {
            width: 100%;
            height: auto;
        }

        .button-0
        {
            width: 100%;
            height: 125px;
        }

        .button-1
        {
            width: 100%;
            height:50%;
            display: inline-block;
        }
    </style>
    </head>
    <body>
        <div class="row">
            <div class="col-3"><button class="button button-0" href="">Dummy0</button></div>
            <div class="col-6"><button class="button button-0" onclick="javascript:history.go(0)">Refresh page</button></div>
            <div class="col-3"><button class="button button-0">Dummy1</button></div>
        </div>
        <div class="row">
            <div class="col-5">
                <img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
            </div>
            <div class="col-2">
                <button class="button button-1" href="">Dummy2</button>
                <button class="button button-1" href="">Dummy3</button>
            </div>
            <div class="col-5">
                <img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
            </div>
        </div>
    </body>
</html>

Answer 1

只需添加

.button-0{
 height: 9vw;
 max-height: 125px;
}
.row{ 
 display: flex; 
 display: -webkit-flex; 
}

應該做的伎倆！ 將高度：9vw 調整為您認為在縮小時最佳的任何值。

在 css 響應式網格中縮放高度

問題描述

1 個解決方案

解決方案1
1 已采納 2017-09-27 21:06:00

在 css 響應式網格中縮放高度

問題描述

1 個解決方案

解決方案1 1 已采納 2017-09-27 21:06:00

解決方案1
1 已采納 2017-09-27 21:06:00