主页 / 问题 / 1572724
Accepted
Anuchkin Artem
Asked:2024-03-22 10:27:57 +0000 UTC2024-03-22 10:27:57 +0000 UTC

大众网站上的所有Adaptive都正常吗？

  • 772

我刚刚开始了解网站上的自适应设计并想，为什么不在 vw 中编写所有样式并为每个元素编写媒体查询，这有多正常？他们这样做吗？如果不是，那为什么不应该这样做呢？

Ps - 我知道这并不专业，只是“这可能吗？”，如果我向某人展示代码，他们会打败我吗？

css

3 个回答

  1. 它将是橡胶的，而不是适应性的。例如，在 1920 年，50vw = 960px，在 320 年 = 160px。如果在 50vw 时此容器中还有多个元素，那么在分辨率为 1920 时，它们将正常放入容器中，而在分辨率为 320 时，它们将已经非常小。

    • 0
  2. Best Answer

    并不真地

    vw这对于创建响应式网页是必要的，但还不够。最好使用vmin而不是vw避免方向问题：

    :root {
  --size-standard: 4vmin;
}

    您还会发现媒体查询对于澄清此大小很有用：

    @media only screen {
   :root {
    --size-standart: calc(8vmin);
  }
}

@media only screen and (min-width: 600px) {
   :root {
    --size-standart: calc(7vmin);
  }
}

@media only screen and (min-width: 768px) {
   :root {
    --size-standart: calc(6vmin);
  }
}

@media only screen and (min-width: 992px) {
   :root {
    --size-standart: calc(5vmin);
  }
}

@media only screen and (min-width: 1200px) {
   :root {
    --size-standart: calc(4vmin);
  }
}

    您必须设置所有尺寸以--size-standard支持适应性。
    在布局过程中，如果内容量和容器大小稳定，则值得使用grid自适应标记grid-template。对于灵活的容器来说，它值得使用flex。有时值得为不同的方向创建不同的布局：

    @media only screen and (orientation: portrait) {
    body {
        grid-template:
            'header-area' auto
            'nav-area' auto
            'content-area' 1fr
            / 1fr
        ;
    }
}

@media only screen and (orientation: landscape) {
    body {
        grid-template:
            'header-area header-area' auto
            'nav-area content-area' 1fr
            / auto 1fr
        ;
    }
}

    对于文本适应性，您应该em很少使用它rem。有时text-overflow: ellipsis;，如果它们超出边界，则用于修剪。
    有很多方法可以适应。您需要尽可能地了解它们，并知道在特定情况下什么最有帮助。

    • 0

  3. 首先，一个重要的问题是“一切”这个词到底意味着什么——也只是布局或字体大小。

    纯粹以视口单位完成的工作将无法缩放。比例似乎会发生变化，但区域将保持在原来的位置并保持相同的（相对于屏幕）尺寸。

    当所有内容（包括字体）都在 v* 中指定时，我将从该选项开始

    这将意味着用户根本无法对网站应用缩放 - 无论他如何更改缩放比例，绝对不会发生任何变化。在这种情况下，文本要么在大显示器上很大，要么在手机上小得难以区分，甚至同时出现这两种选项。但没有办法让事情变得更接近并增加可能性。

    但这在某些情况下可以是好事而不是坏事吗？嗯，对于几乎所有通常不好的选择，都可能存在一种理想的情况。我可以想到一些比赛场地完全适合屏幕的游戏 - 无论如何，它必须适合手机的小尺寸，尽管对于大型计算机显示器来说，仍然值得制作一些游戏字段或更改其他内容。

    现在第二个选项：在 v* 中设置布局，但不设置字体

    这里我们面临另一个问题：宽度为 1920px，30vw 的宽度将是 576px - 大约 76ch（即，您可以像印刷书籍一样将文本放置在一行中），如果这是在320px，那么它将是 96px - 大约 12ch（其中即使是带有分隔符但没有连字符的电话号码也不适合）。而且我还没有考虑到这些块应该有缩进。也就是说，这样的网站一般无法正常阅读。

    还有一些副作用

    由于某种原因，这个问题不仅涉及视口单位，还具体涉及vw. 这让我觉得不希望页面完全适合屏幕（最有可能通过 vmin），而是只适合宽度，而不适合高度。然后它们出现...卷轴...vw（以及其他v*）完全忽略卷轴。因此，一旦垂直滚动以 100vw 的宽度（或总宽度 100vw）出现，所有桌面（默认 Mac 除外）上的一个奖励就是水平滚动，能够滚动 17px 到正确的。有几种方法可以摆脱它们，但最好不要给自己制造问题。

    再次，关于宽度的适合：如果网站有固定元素（页眉、页脚、导航），那么它们在手机上纵向和横向占据的高度是完全不同的。此外，如果字体取决于 vw，事实证明，横向配置中的垂直空间较少，相反，我们会为固定元素提供更多（由于 vw 较大），这很可能会使网站完全不适合在横向配置中使用。

    关于媒体查询

    绝对不是每个元素都需要它们。元素的位置应尽可能与其容器相关，媒体查询应在页面布局级别以及真正需要它们的几个地方使用。

    如果我可以根据内容做其他事情，我会尽量不使用媒体查询。

    一般来说，容器查询已经出现，很快就可以安全地使用它们来代替媒体。如果有多个嵌套位置来重建布局，它们提供了更大的灵活性并且更加方便。

    • 0

相关问题