Media queries are an essential tool in responsive web design. Responsive web design is an approach to web design that aims to create websites that look good and work well on a wide range of devices, including mobile phones, tablets, laptops, and desktops. Since you've already learned about Media Queries, in this topic we will just quickly go through the basics. Our main focus will be Media Queries in Responsive Web Design (RWD).
Media Queries
Media queries are a CSS technique used for applying different styles to a website that are based on the characteristics of the device or the screen size it is viewed on. It is the most used CSS technique for achieving Responsive Web Design (RWD). Let's have a look at the media query syntax:
@media media-type and (media-feature-rule) {
/* CSS styles go here */
}Let's break it down.
- @media — Media queries are applied using the
@mediarule in CSS. - media-type — Specifies the type of media the styles should apply to. The most common types are
screen(computer screens),print(printing), andspeech(screen readers, and other speech synthesizers). - media-feature-rule — condition check by the browser before applying the styles.
media-feature-rulecan bemax-width,min-width,orientation, andresolution. They are enclosed in parentheses and separated from the media type byand. - /* CSS styles go here */ — CSS styles that should be applied if the media query condition is met.
The usage of Media Queries
In this simple example, we will demonstrate the usage of a media query that is applied to a screen that is 600 pixels wide or less:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}This code will output a light-blue background if the screen is 600 pixels wide or less. Let's use this example of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Media Query Example</h2>
</body>
</html> The output:
Adding breakpoints
Breakpoints are specific points in the viewport width where you want your design to change. They are commonly used in responsive web design to target different device sizes. Let's take a look at some standard breakpoints in RWD:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}These are some standard breakpoints, but as mentioned in the previous part, you can adapt the breakpoints to your liking as long as you follow media query syntax.
In order to determine your breakpoints you need to identify the viewport widths at which you want your design to adapt. Common breakpoints include mobile, tablet, and desktop sizes.
The best RWD practice is to write Media Queries for each breakpoint starting with a media query for the smallest screen size (e.g., mobile) and working your way up to larger sizes. Make sure you include a minimum and maximum width range that corresponds to the desired breakpoint, for example:
@media (min-width: 600px) and (max-width: 900px) {
/* CSS rules for screens between 601px and 900px */
}When you determine your breakpoint, write the CSS rules that should apply to the specified breakpoint. Modify the styles to accommodate the specific needs of that screen size. For example, you might adjust the layout, change font sizes, resize images, or hide/show certain elements. Keep in mind that if you want the same CSS rule for desktop and mobile versions, you don't need to duplicate the code. For instance, if you want a white background for the desktop and mobile versions there is no need to duplicate the code.
Mobile-first Approach
You've already learned that a mobile-first approach is one of the practices you should consider for implementing RWD. So instead of changing styles when the width gets smaller, you should change the design when the width gets larger. When using media queries for responsive web design, following the mobile-first approach offers several advantages.
First is user experience. Today the majority of internet users access websites through mobile devices. By prioritizing the mobile experience, you ensure that your website is optimized for the most common viewing platform, resulting in a better user experience. The mobile-first design focuses on simplicity, speed, and ease of use, which can lead to increased user engagement and satisfaction.
The mobile-first design encourages you to prioritize essential content and functionality, enabling you to create a leaner and more optimized website enhancing the performance of your website. By starting with a mobile-friendly layout and progressively enhancing it for larger screens, you can minimize the amount of CSS and JavaScript needed, resulting in faster load times and improved performance across all devices.
Mobile usage continues to rise, and new devices with varying screen sizes and resolutions are regularly introduced to the market. By adopting a mobile-first approach, you future-proof your design as it adapts seamlessly to different screen sizes and resolutions. This flexibility is particularly important as the landscape of mobile devices continues to evolve.
Search engines, like Google, prioritize mobile-friendly websites in their search results. Following a mobile-first approach helps your website meet Google's mobile-friendly criteria, potentially leading to better search engine rankings and increased organic traffic.
Starting with a mobile design foundation makes it easier to scale up your website for larger screens. With the core elements and layout already established, you can gradually enhance the design and add more complex features as the screen size increases. This approach simplifies the development process and ensures consistency across different devices.
Conclusion
In conclusion, media queries are essential in responsive web design, allowing websites to adapt to different devices and screen sizes. Breakpoints define when the design changes for various device sizes. A mobile-first approach prioritizes the mobile experience and offers benefits such as improved user experience, better performance, future-proofing, SEO advantages, and easier scalability. By starting with a mobile-friendly layout and enhancing it for larger screens, websites can optimize their design. Keep in mind the practices you've learned today when making a responsive website.