Question

我已经设置了一个简单的页面，其中有一个重新响应的css网格，我在w3schools的这篇文章中读到了：

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

宽度缩放效果很好。

我有两件事我无法解决：

我在960px的页面上设置了最大宽度，当我使视口变小时，宽度可以很好地缩放，但对于我在顶部的按钮，我希望它们的高度为125px当页面处于最大宽度，然后按宽度按比例缩小。
对于dummy2和dummy3按钮，我希望它们在该网格行中具有50％的高度。

下面是代码：

    <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 个答案: