在css响应网格中缩放高度

Question

我已经设置了一个带有响应式 CSS 网格的简单页面，我在 w3schools 上的这篇文章中读到了该页面：

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

宽度缩放效果很好。

我有两件事无法解决：

1. 我已经在页面上设置了 960 像素的最大宽度，当我将视口变小时，宽度可以很好地缩放，但是对于我在顶部的按钮，我希望它们的高度为 125 像素当页面处于其最大宽度时，然后与宽度成比例缩小。

2. 对于 dummy2 和 dummy3 按钮，我希望它们在该网格行中具有 50% 的高度。

她是我得到的东西： 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 调整为您认为在缩小时的最佳值。