If you want to develop websites/web applications, then knowing how to create responsive designs is essential to your success.
In the past, the creation of websites that adapted well to different screen sizes was a luxury that website owners had to request from a developer. However, the uptick in the use of smartphones and tablets has now made responsive design a necessity in the world of software development.
Using media queries is hands down the best way to ensure that your website/web app appears exactly how you want it to on every device.
Understanding Responsive Design
In a nutshell, responsive design deals with using HTML/CSS to create a website/web app layout that adapts to various screen sizes. In HTML/CSS there are a few different ways to achieve responsiveness in a website design:
- Using rem and em units instead of pixels (px)
- Setting the viewport/scale of each webpage
- Using media queries
What Are Media Queries?
A media query is a feature of CSS that was released in the CSS3 version. With the introduction of this new feature users of CSS gain the ability to adjust the display of a webpage based on a device/screen height, width, and orientation (landscape or portrait mode).
Media queries provide a framework for creating code once and using it multiple times throughout your program. This might not seem so helpful if you’re developing a website with only three web pages, but if you’re working for a company with hundreds of different web pages—this will prove to be a massive time saver.
Using Media Queries
There are several different things that you need to take into account when using media queries: structure, placement, range, and linking.
The Structure of Media Queries
Example of a Media Query Structure
@media only/not media-type and (expression){
/*CSS code*/
}
The general structure of a media query includes:
- The @media keyword
- The not/only keyword
- A media-type (which can be either screen, print, or speech)
- The keyword “and”
- A unique expression enclosed in parentheses
- CSS code enclosed in a pair of open and close curly braces.
Example of a Media Query With the Only Keyword
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}
The example above applies CSS styling (specifically a blue background color) to only device screens that have a width of 450px and under—so basically smartphones. The “only” keyword can be replaced with the “not” keyword and then CSS styling in the media query above would only apply to print and speech.
However, by default, a general media query declaration applies to all three media types so there is no need to specify a media type unless the aim is to exclude one or more of them.
Default Media Query Example
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}
The Placement of Media Queries
A media query is a CSS property; it can, therefore, only be used within the styling language. There are three different ways to include CSS in your code; however, only two of those methods provide a practical way to include media queries in your programs—internal or external CSS.
The internal method includes adding the <style> tag to the <head> tag of the HTML file, and creating the media query within the parameters of the <style> tag.
The external method involves creating a media query in an external CSS file and linking it to your HTML file via the <link> tag.
The Range of Media Queries
Whether media queries are used via internal or external CSS, there is one major aspect of the styling language that can adversely affect how a media query functions. CSS has an order of precedence rule. When using a CSS selector, or in this case a media query, each new media query that is added to the CSS file overrides (or takes precedence over) the one that came before.
The default media query code that we have above targets smartphones (450px wide and under), so if you wanted to set a different background for tablets you might think you could simply add the following code to your pre-existing CSS file.
Tablet Media Query Example
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
The only problem is that, due to the order of precedence, tablets would have a red background color and smartphones would now also have a red background color because 450px and under is under 800px.
One way to solve this little problem would be to add the media query for tablets before the ones for smartphones; the latter would override the former and you would now have smartphones with a blue background color and tablets with a red background color.
However, there is a better way to achieve separate styling for smartphones and tablets without being concerned about the order of precedence. This is a feature of media queries known as range specification, where the developer can create a media query with the maximum and minimum width (the range).
Tablet Media Query With Range Example
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
With the example above the placement of media queries within a stylesheet becomes irrelevant as the design for tablets and smartphones target two separate collections of width.
Link Media Queries
If you don’t want to embed media queries into your CSS code, there is an alternative method that you can use. This method involves using media queries in the <link> tag of an HTML file, so instead of having one massive stylesheet that contains the styling preferences for smartphones, tablets, and computers—you could use three separate CSS files and create your media queries in the <link> tag.
The <link> tag is an HTML element that is used to import CSS styling from an external stylesheet. This tag has a media property that works the same way as a media query would in CSS.
Using Media Queries in the Link tag Example
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">
The code above should be placed in the <head> tag of your HTML file. Now all you need to do is create three separate CSS files with the file names main.css, tablet.css, and smartphone.css—then create the specific design that you would want for each device.
The style in the main file will apply to all screens with a width greater than 800px, the style in the tablet file will apply to all screens with a width between 450px and 801px, and the style in the smartphone file will apply to all screens below 451px.
Now You Have the Tools to Create Responsive Designs
If you made it to the end of this article you were able to learn what responsive design is and why it is useful. You can now identify and use media queries in CSS and HTML files. Additionally, you were introduced to the order of precedence in CSS and saw how it could affect how your media queries function.
Image Credit: Negative Space/Pexels