正如您在图片中看到的,我已经为宽度为 768px 的屏幕编写了查询,但我为宽度为 375px 的设备编写的查询正在应用。
我尝试使用最大宽度,但我必须为所有设备宽度再次重写它,这将非常耗时。我确保在一般 css 之后按照从最高像素宽度到最低像素宽度的顺序添加它们。
您正在使用两个仅具有最小宽度边界的媒体查询
@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) {...}