CSS Media Queries On A High Level
Have you ever visited a web page on your mobile device and find yourself having to scroll from left to right on each line? These are unresponsive sites. Pages that only look good on desktop.
For this reason we have media queries. A CSS technique used to make your websites more responsive.
Responsive design refers to web pages that adjust their layout to look good on screens of all sizes, not just desktops.
Making your webpages fully responsive takes practice and time. In this post I will just be covering the what, why, and basic syntax of media queries.
What Are Media Queries?
Media queries are simply a way to conditionally add styles to your pages. They are most commonly used to make websites responsive because of their ability to only apply styles in certain scenarios.
By using them we have the ability, but not limited to:
- Change how a webpage looks when it is printed.
- Make our websites more accessible by applying certain pauses in the text if the document is being rendered on a speech device.
- Adjust our page’s layout to look good on all devices.
Now that we know what their purpose is, let’s talk about how to use them in our code.
How To Use Media Queries?
Media queries are similar to functions and conditionals. If all expressions evaluate to true the styles in the block will be applied.
They also take in two arguments, media type and expression, which are entirely optional. However, you do want to specify at least one of them, otherwise whats the point of using them in the first place.
Media types can be of 3 values: speech, screen, and print. When left blank it defaults to all, applying the conditional CSS to all devices. If the media type provided is invalid the query will always evaluate to false.
On top of the media type argument a media query can also accept expressions using what are called ‘media features’. Which are just attributes of the device on which the document is being rendered on.
The main ones you will be using are:
orientation: which can take a value of eitherlandscapeorportrait.print: to apply different styles to printed pages.min-width&max-width: which take in a metric value such as px.
There are a whole bunch of other media features for those rare cases so make sure to check out the docs.
Say we wanted to change the background color to light blue when the screen is less than or equal to 600px. We could write a simple query like this.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Media queries also allow us to combine expressions using logical operators for when we want even more specific styles.
Some of the operators include and and , (or). These work just like they do in any programming language. When using and all conditions must evaluate to true for the styles to be applied. , is used when you want to apply the same styles in different situations.
@media screen and (max-width: 600px), (orientation: landscape){
body {
background-color: lightblue;
}
}Note: Media features must be separated by parentheses ^^
This code will be applied if the device has a screen and a width of 600px or less or the orientation is in landscape mode.
Keep in mind that CSS media queries work just like any other CSS selector. The last attribute of the same selector takes precedence over any other defined above. For this reason we must always define the queries below.
body {
background-color: red
}@media screen and (max-width: 600px), (orientation: landscape){
body {
background-color: lightblue;
}
}
If you ever want to conditionally display a completely different stylesheet from the default one, you can. By attaching a media query to the <link> tag in the head. Which will still download the sheet but only apply it if it means all the conditions.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Conclusion
Media queries can be used for many purposes but the most common one is to make responsive sites that can be viewed on most devices. Responsive design is a skill that is in high demand in today’s market and it is not going anywhere anytime soon. Hopefully this post gave you a better understanding on what they are and how they work.
