[英]Scaling height in css responsive grid
我已经设置了一个简单的页面,其中包含我在 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>
只需添加
.button-0{
height: 9vw;
max-height: 125px;
}
.row{
display: flex;
display: -webkit-flex;
}
应该做的伎俩! 将高度:9vw 调整为您认为在缩小时最佳的任何值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.