Html 柔性网格没有响应

我试图通过简单地使用flex box创建一个钢琴网格。然而，我正在努力使它对所有屏幕尺寸都有响应。基本上，我把它们放在flex box容器上，这样我就可以单独处理它们了

这是我的密码：

<div class="container">
  <div data-keynote="C" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="D" class="key white"></div>
  <div data-keynote="E" class="key black"></div>
  <div data-keynote="Eb" class="key white"></div>
  <div data-keynote="G" class="key white"></div>
  <div data-keynote="A" class="key black"></div>
  <div data-keynote="Bb" class="key white"></div>
  <div data-keynote="B" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>
  <div data-keynote="C" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="D" class="key white"></div>
  <div data-keynote="E" class="key black"></div>
  <div data-keynote="Eb" class="key white"></div>
  <div data-keynote="G" class="key white"></div>
  <div data-keynote="A" class="key black"></div>
  <div data-keynote="Bb" class="key white"></div>
  <div data-keynote="B" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>
  <div data-keynote="C" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="D" class="key white"></div>
  <div data-keynote="E" class="key black"></div>
  <div data-keynote="Eb" class="key white"></div>
  <div data-keynote="G" class="key white"></div>
  <div data-keynote="A" class="key black"></div>
  <div data-keynote="Bb" class="key white"></div>
  <div data-keynote="B" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>
  <div data-keynote="Db" class="key black"></div>
  <div data-keynote="Db" class="key white"></div>

</div>

---

你知道我应该做些什么来让它在平板电脑和手机等小型设备上看起来更好吗？

看看这个片段：

身体{
背景色：黑色；
保证金：0；
填充：0；
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.集装箱{
显示器：flex；
最大宽度：80vw；
背景：黑色；
}
.钥匙{
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
证明内容：中心；
}
怀特先生{
宽度：10vw；
高度：35vh；
背景色：白色；
颜色：黑色；
左边框：2px实心#333333；
}
布莱克先生{
宽度：7vw；
高度：22vh；
背景色：黑色；
颜色：白色；
左边距：-2vw；
保证金权利：-2vw；
z指数：1；
}
@仅介质屏幕和（最大宽度：600px）{
.集装箱{
最大宽度：90vw；
}
}
}

响应的第一步不是使用固定的像素大小。尝试使用em而不是ems。你能帮我使用ems吗？我可以为手机提出一个想法-将按键旋转90度-

变换：旋转（90度）为什么不尝试引导？