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

Using OR Logic in CSS Media Queries

When defining media queries, it's essential to know how to specify multiple conditions using "OR" logic. Suppose you wish to define a style rule that applies when either the maximum width or maximum height of the viewport meets certain criteria.

Unfortunately, using the "OR" keyword is invalid in CSS media queries. Instead, the correct syntax is to separate each condition with a comma.

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

By using a comma, the media query will apply to any viewport where the max-width is less than or equal to 995px or the max-height is less than or equal to 700px.

This behavior is due to the fundamental difference between "AND" (&&) and "OR" (||) logical operators in CSS media queries. The "AND" operator requires both conditions to be true, while the comma (",") operator represents an "OR" operation, where either condition being true is sufficient.

Understanding this distinction when writing media queries is crucial for achieving the desired styling based on different device viewport characteristics.

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