Question

我的媒体查询适用于Firefox和Chrome，但不适用于Safari。

@media screen (-webkit-min-device-pixel-ratio: 1),
    and (min-device-width: 1000px), 
    and (max-device-width: 1600px),
    and (min-resolution: 192dpi) { }

他们在safari中工作得非常好，直到我添加了一些额外的代码来支持Firefox。

我也有

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在我的HTML中，所以不是这个。

请帮忙!!

Answer 1

您的操作：

@media screen (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px), 
and (max-device-width: 1600px),
and (min-resolution: 192dpi) { }

读取：

or and (min-device-width: 1000px)
or and (max-device-width: 1600px)
or and and (min-resolution: 192dpi)

By documentation:

以逗号分隔的列表


在媒体查询中使用时，以逗号分隔的列表的行为类似于逻辑运算符or。使用以逗号分隔的媒体查询列表时，如果任何媒体查询返回true，则会应用样式或样式表。逗号分隔列表中的每个媒体查询都被视为单个查询，应用于一个媒体查询的任何运算符都不会影响其他查询。这意味着以逗号分隔的媒体查询可以定位不同的媒体功能，类型和状态。

要么检查这是预期的行为，要么将逻辑操作and和or彼此分开...... Firefox / Chrome在规则上有更好的实现，因此可以“修复”其中常见的逻辑谬误。

Answer 2

I have solved it, I have separated the media query into two so that it is

@media screen and (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px), 
and (max-device-width: 1600px) { }

and then

@media screen and (min-resolution: 192dpi) { }

this has solved the issue

媒体查询无法在Safari中使用

2 个答案: