我正在尝试创建一个钢琴键盘,该键盘将使用弹性框保持其元素比例,但一旦我开始更改窗口大小,似乎无法使黑色音符保持相同的宽度或高度。
这里有一个fiddle
body{
width: 800px;
height: 200px;
display: flex;
}
#kbd {
padding: 1%;
flex-flow: column;
display: flex;
flex: 4;
}
#keys {
display: flex;
flex: 8;
justify-content: center;
}
.note {
flex: 1;
display: inline-flex;
align-items: center;
}
.black {
justify-content: center;
position: absolute;
height: 45%;
background-color: #474747;
color: white;
width: 8%;
margin: 0 -4%;
}
.white {
flex-flow: column;
justify-content: flex-end;
outline: 2px solid #474747;
color: #474747;
background-color: #ffffff;
padding-bottom: 1%;
}
演示@Codepen
为此不需要 Flexbox。响应式键盘布局可以通过以下方式完成:
<div class="key white c" ></div>
<div class="key black c_sharp"></div>
<div class="key white d" ></div>
<div class="key black d_sharp"></div>
<div class="key white e" ></div>
<div class="key white f" ></div>
<div class="key black f_sharp"></div>
<div class="key white g" ></div>
<div class="key black g_sharp"></div>
<div class="key white a" ></div>
<div class="key black a_sharp"></div>
<div class="key white b" ></div>
- 所有黑键和黑键之前的每个白键的边距,使用基于黑键大小的偏移量:
.a, .b, .d, .e, .g, .black{
margin: 0 0 0 (-($blackKey_Width / 2) - $blackKey_BorderWidth);
}
.key{
float: left;
position: relative;
}
.white{
z-index: 1;
}
.black{
z-index: 2;
}
-
视口单位 [
vw
, vh
, vmin
, vmax
] 为了 (height
& width
) 的属性 (.white
& .black
) 选择器。您可以通过调整黑键相对于白键的百分比来使其更加动态。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)