主页 / 问题 / 1537653
Accepted
Dream
Asked:2023-08-26 02:05:02 +0000 UTC2023-08-26 02:05:02 +0000 UTC

CSS媒体适配问题

  • 772

对于媒体适配，您需要指定宽度和高度：

@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px) {}

还是分开？简单来说，如果一次性指定所有内容，就会出现盲点。您能否写出媒体适应的主要尺寸（从最小的智能手机显示屏（0-360）到超宽显示屏）？

css

2 个回答

  1. 在媒体查询中，您可以同时指定宽度和高度，也可以指定相同的宽度和高度，但单独指定，没有人限制您。至于您所要求的设备尺寸，问题本身是不正确的。通过这样的问题表述，我们可以得出结论，您关注的是媒体查询，这是不正确的，因为媒体查询越少越好。

    如果您想要流行的设备尺寸，您可以在控制台中打开检查器并单击“显示或隐藏设备工具栏”或类似的操作。在那里您可以找到所有流行智能手机和平板电脑的尺寸，如果您愿意，甚至可以添加您自己的尺寸。你需要准确地关注这一点。一般来说，320px以上

    • 0
  2. Best Answer

    将媒体查询视为条件（事实上，它们就是）。

    @media (orientation: portrait) and (max-width: 360px) and (max-height: 640px)

    可以理解为：“纵向模式且屏幕宽度不超过360px，高度不超过640px。”

    我必须马上说，orietation它是根据纵横比计算的，即 360x640 将会是portrait，但 640x360 已经是了landscape。

    具体来说，您的条件有一个错误：宽度超过 360px，但高度小于 640px 的屏幕，不再属于此请求，为了获得它，您应该像这样重建条件：

    @media (orientation: portrait) and (max-width: 360px) or (max-height: 640px)

    然后，所有在纵向模式下宽度小于 360 像素或高度小于 640 像素的屏幕都将受到该条件的约束。

    ...媒体适应的基本维度...

    它们各地都不同，更多地取决于设计。

    我最常使用以下条件：

    @media screen and (min-width: 1280px) {} /* ноутбук */
@media screen and (min-width: 1024px) {} /* планшет */
@media screen and (min-width: 768px)  {} /* мобилка */

    上一个项目中，只适配了手机，并且只使用了一个媒体查询：

    @media screen and (max-width: 768px) and (orientation: portrait)

    那里使用了“自适应像素”，所以这就足够了。

    • 0

相关问题