Web Design Basics: CSS Media Queries

When it comes to web design, it’s impossible not to come across CSS media queries. Media queries, of course, consist of media types with at least one expression that limits the style sheets’ scope. They make use of media features like width, height and color. When added to CSS3, media queries allow the presentation content to be tailored to specific ranges of output devices. This is accomplished without having to change the content itself.

Media queries contain a media type and can contain one or more expressions. These are expressed as media features that resolve to either true or false. The query result is true if the media type specified in the media query matches the device type where the document is being displayed on and all the media query expressions are true.

When the media query is true, what’s applied is the corresponding style sheet or style rules following normal cascade rules. A style sheet with a media query attached to its <link> tags will still download. This will happen even if the media queries would return as false. The media type is optional and the all type will be implied unless the not or only operator are used.

arrow4

One can also use logical operators to create complex media queries. To combine multiple media queries together into a single media, the and operator is used. This requires each chained feature to return true for the query to be true. The not operator, meanwhile, is used in applying a style if the entire query matches. This is particularly helpful in preventing older browsers from applying selected styles. Using the not or only operators requires explicit media types to be specified.

Multiple media queries can be combined in a list separated by commas. If any of the media queries in the list is true, the entirety of the media statement returns true.

Comma separated lists can be used in media queries and will behave like the logical operator or. If any of the media queries returns true when comma separated lists are used, style sheets get applied. Please note that every query in a comma separated list is taken as an individual query. This means operators applied to one query won’t really affect any of the others.

There are so many other aspects to CSS media queries for use in web design. There many other operators that can be used to create so many other different results. Web design is very dynamic, and CSS media queries are just some of the tools used in creating spectacular designs. You can also use CSS to create fancy mobile-friendly menus!