Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Conditional stylesheets with CSS3 media queries

Tuesday, October 23rd, 2018 by Servage

css-media-queriesMedia queries is a powerful feature used to selectively apply CSS styles to a document based on certain conditions. The most common conditions are screen height and width, and these conditions are often used to create responsive websites. These days, it is crucial to understand how media queries work to create modern websites.

The @media rule

A media query is created by using the @media rule inside a regular CSS style sheet. @media is followed by the rules that apply to the media query. If these requirements are met, all styles inside the media query will be applied to the web page. Here is an example of what a media query can look like: @media screen and (max-width: 768px) { }. This particular query would match a mobile device, and all CSS styles inside the curly brackets would be applied to whatever elements they are set to apply to.

Media query types and features

Media queries consist of two things: types and features. Types are simply keywords that don’t have any values: they are either true or false. In the above example query, the word screen is a media type and max-width is a feature. These together form a single media query, but they can also be used alone. For example, you can only use @media screen or @media (max-width).

Commonly used types and features

These are some of the most commonly used media queries on modern websites:

screen: The target device uses a screen. This matches computers, tablets, phones and so on but excludes for example screen readers and text-to-speech readers. Example: @media screen { }.

max-width & min-width: Targets browsers which window width is greater or less than the specified amount. These features are often used to create responsive websites. Example: @media screen and (min-width: 1200px) { }.

max-height & min-height: Less commonly used but works the same way as the above width features. Can be used to determine if an element has enough vertical space on the screen. Example: @media screen and (min-height: 480px) { }.

orientation: Checks the orientation of the device. Accepts two values: landscape and portrait. Example: @media screen and (orientation: portrait) { }.

This was a brief introduction to the commonly used media queries. Keep in mind that there are many more types and features for you to try in your designs. Media queries are powerful and widely supported in all browsers as of today, and it is encouraged to take advantage of them. Nearly every CSS framework and responsive website uses them.

Conditional stylesheets with CSS3 media queries, 3.8 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.