如何使用 HTML 和 CSS 创建完全灵活的钢琴键盘

Question

我正在尝试创建一个钢琴键盘，该键盘将使用弹性框保持其元素比例，但一旦我开始更改窗口大小，似乎无法使黑色音符保持相同的宽度或高度。

这是一个小提琴

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%;
}

Answer 1

演示@Codepen

\n\n

为此不需要 Flexbox。响应式键盘布局可以通过以下方式完成：
\n\xc2\xa0

\n

\n
• 与每个键的注释相对应的附加类选择器：
\n

\n

<div class="key white c"      ></div>\n<div class="key black c_sharp"></div>\n<div class="key white d"      ></div>\n<div class="key black d_sharp"></div>\n<div class="key white e"      ></div>\n<div class="key white f"      ></div>\n<div class="key black f_sharp"></div>\n<div class="key white g"      ></div>\n<div class="key black g_sharp"></div>\n<div class="key white a"      ></div>\n<div class="key black a_sharp"></div>\n<div class="key white b"      ></div>\n

\n

\xc2\xa0

\n

\n
• 所有黑键和黑键之前的每个白键的边距，使用基于黑键大小的偏移量：
\n

\n

.a, .b, .d, .e, .g, .black{\n  margin: 0 0 0 (-($blackKey_Width / 2) - $blackKey_BorderWidth);\n}\n

\n

\xc2\xa0

\n

\n
• 以下关键放置属性：
\n

\n

.key{\n  float:    left;\n  position: relative;\n}\n

\n

\xc2\xa0

\n

\n
• z-index黑键更高：
\n

\n

.white{\n  z-index: 1;\n}\n.black{\n  z-index: 2;\n}\n

\n

\xc2\xa0

\n

\n
• ( & ) 选择器的 ( &)属性的视口单位[vw,vh,vmin,vmax]。您可以通过将黑键的大小设置为白键的百分比来使其更加动态。heightwidth.white.black
\n

\n