我已经设置了一个带有响应式 css 网格的简单页面，我在 w3schools 上阅读了这篇文章:
https://www.w3schools.com/css/css_rwd_grid.asp
宽度缩放效果很好。
我有两件事无法解决:
我在页面上设置了 960 像素的最大宽度，当我缩小视口(viewport)时，宽度比例很好，但是对于我在顶部的按钮，我希望它们的高度为 125 像素当页面处于最大宽度时，然后按宽度按比例缩小。
对于 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>
最佳答案
只需添加
.button-0{
height: 9vw;
max-height: 125px;
}
.row{
display: flex;
display: -webkit-flex;
}
应该可以解决问题!将 height: 9vw 调整为您认为最佳的值，同时缩小。
关于html - 在 css 响应网格中缩放高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46457037/