如何解决如何以交叉兼容的方式创建正确分离的@media查询？
考虑以下HTML：
<div id="x">A</div>
说我想对其应用以下样式规则：
- 如果屏幕宽度为600像素或更多，我想应用阴影。
- 如果屏幕宽度小于600像素，我想应用实线边框。
我的直觉是这样编写查询：
@media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
@media not (min-width: 600px)
{
#x { border: solid 1px #666; }
}<div id="x">A</div>这在Firefox中非常有效，但是在Chrome和Safari中，从未应用not查询。
我可以想到其他三个选择：
-
@media (max-width: 599px)
如果浏览器的缩放比例不是100％，则有机会应用都不样式，请参见this GitHub issue。 -
@media (max-width: 600px)
保证在窗口宽度恰好为600px时应用两个查询。 - 转储默认规则集中的一种样式，并在任何地方使用
<attribute>: default手动“撤消”它所做的所有操作。
这根本不切实际。
有什么办法可以完成上述任务而又不丢失边缘情况？
我想以前会问过这个问题，但是您无法在Google上查询not，因为您发现的只是“不起作用”。
解决方法
根据MDN文档：
注意：在大多数情况下，默认情况下，如果未指定其他类型，则使用all介质类型。但是，如果使用非或仅运算符，则必须显式指定媒体类型。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
如果您在“非”之后添加“所有”媒体类型，Chrome / Safari似乎会更喜欢
@media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
@media not all and (min-width: 600px)
{
#x { border: solid 1px #666; }
}<div id="x">A</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。