文章/答案/技术大牛

发布

社区首页 >问答首页 >挠性网格没有响应

问挠性网格没有响应
EN

Stack Overflow用户

提问于 2020-08-17 09:39:14

回答 1查看 69关注 0票数 3

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

这是我的密码：

<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>

你知道我该怎么做才能让它在平板电脑和手机等较小的设备上看起来更好？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-17 14:06:00

看看这个片段：

<!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>

我为改进您的代码所采取的步骤是：

friendly.

Instead densities.

Furthermore，I用black替换了#000和#000000值，因为使用以屏幕宽度/高度的百分比(%)表示的值的用户很多，所以使用了vw和vh的相对单位，这使得您的内容在不同的densities.

Furthermore，i更改为99到1的z索引的显示中看起来类似，这并没有造成任何差别，但我喜欢遵循逐步增加z索引的一般惯例，而不是将任意的values.

Finally i增大为所有小型设备的容器div宽度。

注意：，我没有对键类做任何修改，因为它从未在代码中使用过，我也不知道您想用它做什么。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63448267

复制

相似问题

问挠性网格没有响应
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挠性网格没有响应EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挠性网格没有响应
EN