小屏CSS媒体查询覆盖大屏媒体查询

Question

在此输入图片描述

正如您在图片中看到的，我已经为宽度为 768px 的屏幕编写了查询，但我为宽度为 375px 的设备编写的查询正在应用。

在此输入图片描述

我尝试使用最大宽度，但我必须为所有设备宽度再次重写它，这将非常耗时。我确保在一般 css 之后按照从最高像素宽度到最低像素宽度的顺序添加它们。

Answer 1

您正在使用两个仅具有最小宽度边界的媒体查询

• @media screen and (min-width: 768px) {...}

  我们称之为桌面

• @media screen and (min-width: 375px) {...}

  我们称之为移动

如果这些块应仅应用于不同的分辨率，请使用

min

和

max

（相差 1 个像素）：

• 桌面

  @media screen and (min-width: 768px) {...}

• 手机

  @media screen and (max-width: 767px) {...}