How Can I Use 'OR' Logic in CSS Media Queries?

Using "OR" Logic in CSS Media Queries

CSS media queries allow you to apply styles based on various device or screen conditions, such as width and height. However, you may encounter situations where you need to specify multiple conditions using "OR" logic.

Multiple Conditions with "OR"

While CSS media queries do not explicitly support "OR" logic, you can achieve similar functionality using commas to combine multiple queries into a single rule.

Example

If you want to apply styles when the screen width is less than or equal to 995px or the screen height is less than or equal to 700px, you can use the following media query:

@media screen and (max-width: 995px), screen and (max-height: 700px) {
  ...
}

In this example, commas act as a logical "OR" operator. If either the max-width or max-height condition is met, the styles within the media query will be applied.

Multiple Conditions with "AND"

Note that commas in media queries also support "AND" logic. If you want to apply styles only when both the max-width and max-height conditions are met, you can use the following syntax:

@media screen and (max-width: 995px) and (max-height: 700px) {
  ...
}

Conclusion

Using commas in CSS media queries allows you to specify multiple conditions using "OR" or "AND" logic. This provides flexibility in controlling the application of styles based on various screen or device characteristics.

The above is the detailed content of How Can I Use 'OR' Logic in CSS Media Queries?. For more information, please follow other related articles on the PHP Chinese website!