CSS媒體查詢中的邏輯運(yùn)算符and、not和only用於組合或修改條件，以根據(jù)設(shè)備特性應(yīng)用樣式。首先，使用and運(yùn)算符時(shí)，需將多個(gè)媒體特性條件連接，所有條件都為真時(shí)樣式才生效，例如同時(shí)滿足屏幕寬度在768px至1024px之間或最大寬度600px且為豎屏狀態(tài)；其次，not運(yùn)算符用於否定整個(gè)媒體查詢條件，當(dāng)條件不成立時(shí)樣式才應(yīng)用，如排除彩色打印機(jī)或高分辨率屏幕；最後，only運(yùn)算符主要用於防止舊版瀏覽器（如IE8及更早版本）錯(cuò)誤地應(yīng)用現(xiàn)代媒體查詢樣式，它本身不影響邏輯判斷，但確保只有支持媒體查詢的現(xiàn)代瀏覽器才會(huì)處理相應(yīng)樣式。

When working with CSS media queries, logical operators like and , not , and only let you combine or modify conditions to apply styles based on different device characteristics. These operators help make your responsive design more precise by letting you layer rules together.

Using and to Combine Conditions

The and operator is used to chain multiple media features together. All conditions connected by and must be true for the styles to apply.

For example, if you want to target a screen that's both at least 768px wide and no more than 1024px:

 @media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles here apply only on screens between 768px and 1024px */
}

A common use case is combining screen size with device orientation:

 @media screen and (max-width: 600px) and (orientation: portrait) {
  /* Styles for small portrait devices */
}

• Think of and like an intersection — all parts need to match.
• It's great when targeting very specific breakpoints or device traits.

Just remember that if any part of the condition fails, the entire rule is skipped.

Using not to Exclude a Condition

The not operator negates the entire media query. That means the styles will apply only if the condition is not met .

Say you want to prevent print styles from applying to color printers:

 @media not print and (color) {
  /* This won't apply to color printers */
}

Another example might be excluding high-resolution screens:

 @media not (-webkit-min-device-pixel-ratio: 2) {
  /* Use simpler graphics for lower-res screens */
}

• The not keyword applies to the whole query, not just one feature.
• It can be tricky because it flips the logic — test carefully.

It doesn't work inside parentheses, so keep it at the start of the query.

Using only to Hide Styles from Older Browsers

The only operator is mostly used as a workaround for older browsers that don't fully support media queries. It doesn't change the logic of the query itself but prevents legacy browsers from applying the styles.

For example:

 @media only screen and (max-width: 600px) {
  /* Mobile styles */
}

Older browsers (like IE8 and below) would ignore this block because they don't recognize only . Modern ones just treat it as a signal to parse the query normally.

• Use only when you're targeting specific modern devices and want to avoid style conflicts in outdated browsers.
• You'll often see it paired with screen to make sure print styles aren't affected unintentionally.

You don't always need it these days, but including it can still be a safe practice when supporting older users.

That's how and , not , and only work in media queries — each helps shape when and how your styles get applied. Not too complicated once you break down what each does.

以上是媒體查詢中的邏輯運(yùn)算符（而不是）是什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！