html - Flex 网格没有响应

<分区>

我正在尝试通过简单地使用 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>

知道我应该调整什么以使其在平板电脑和手机等较小的设备上看起来不错吗？

最佳答案

看看这个片段:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            background-color: black;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            max-width: 80vw;
            background: black;
        }

        .key {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            justify-content: center;
        }

        .white {
            width: 10vw;
            height: 35vh;
            background-color: white;
            color: black;
            border-left: 2px solid #333333;
        }

        .black {
            width: 7vw;
            height: 22vh;
            background-color: black;
            color: white;
            margin-left: -2vw;
            margin-right: -2vw;
            z-index: 1;
        }

        @media only screen and (max-width: 600px) {
            .container {
                max-width: 90vw;
            }
        }
    }
</style>
</head>
<body>
    <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>
</body>
</html>

我为改进您的代码而采取的步骤是:

我用 black 替换了 #000 和 #000000 值，因为它对用户非常友好。
我没有使用以屏幕宽度/高度的百分比 (%) 形式给出的值，而是使用了 vw 和 vh 的相对单位，这使您的内容看起来相似跨越各种密度的显示器。
此外，我将 z-index 从 99 更改为 1，这不会造成任何差异，但我喜欢遵循逐渐增加 z-index 的一般惯例，而不是随意设置值。
最后，我为所有小型设备扩大了容器 div 的宽度。

注意:我没有对 key 类做任何改动，因为它从未在代码中使用过，我不知道你想用它做什么。

关于html - Flex 网格没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63448267/

上一篇：Grafana (V7) 在表名中添加变量

下一篇：java - 如何在 IntelliJ 的项目结构中设置默认 Java 版本？

相关文章：

javascript - Bootstrap 选择菜单 - 添加新选项

javascript - 将鼠标移到另一个div中的另一个元素上时如何更改div样式？

html - IE7 边框超出容器宽度

javascript - 将元素从附加列表传递到另一个页面

jquery - 防止移动设备上的 jQuery ContextMenu 子菜单项大小增加

javascript - 表单验证问题(Javascript)

javascript - 在ajax Jquery中发送多部分数据

javascript - 无法访问 jQuery 创建的元素

jquery - 使用jquery或纯javascript为不同浏览器动态添加不同版本的css

javascript - 如何为包含具有内联 block 显示的对象的 div 设置固定高度和自动宽度？