本文介绍了为什么“不(某些宽度:Xem)"媒体查询从不触发?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正试图否定max-device-width媒体查询(原因是如果设备具有精确的宽度,我不会同时触发(max-device-width: X)(min-device-width: X)).不幸的是,not (min-or-max-some-width: X)媒体查询从不触发.

I'm trying to negate the max-device-width media query (the reason for this is I don't won't both (max-device-width: X) and (min-device-width: X) to fire if the device has precisely that width). Unfortunately, the not (min-or-max-some-width: X) media queries never fire.

这是一个小提琴.我希望桌面上有两条黄线,手机上有两条红线.我得到的是台式机上只有一条黄线(最后一条),而移动设备上只有一条红线(第一个).

Here's a small fiddle. I expect two yellow lines on the desktop and two red lines on mobile. What I get is only one yellow line on the desktop (the last one) and only one red line on mobile (the first one).

我在做什么错了?

推荐答案

首次引入媒体查询时,它要求not关键字后跟媒体类型,以使媒体查询有效.似乎很奇怪,但是这就是定义语法的方式(请参见media_query生产).

When Media Queries was first introduced, it required the not keyword to be followed by a media type in order for the media query to be valid. It seems strange, but that's just how the grammar was defined (see the media_query production).

此问题现已在媒体查询级别4 (请参阅<media_not>生产),因此您所拥有的应该在符合MQ4的浏览器中按预期工作.但是,尚未开始提供4级媒体功能的浏览器尚未实现新语法.

This is now fixed in Media Queries level 4 (see the <media_not> production), so what you have should work as expected in browsers that conform to MQ4. However, none of the browsers that have begun shipping level 4 media features has implemented the new grammar yet.

同时,您需要添加媒体类型.如果媒体类型不重要,请使用all:

In the meantime, you'll need to add a media type. If the media type is not important, use all:

not all and (max-device-width: X)

更新了小提琴

这篇关于为什么“不(某些宽度:Xem)"媒体查询从不触发?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-01 18:31
查看更多