AtoZ CSS: Creating Responsive Design with Media Queries

Share this article

AtoZ CSS: Creating Responsive Design with Media Queries

This article is a part of our AtoZ CSS Series. View the full screencast and transcript for Media Queries here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, I’ve added a new quick tip/lesson about media queries for you. M2-01

M is for Media Queries

I would venture a guess that the vast majority of web designers and developers are familiar with the concept of responsive design these days. If not, check out the Media Queries screencast.

Since responsive design is so popular, it’s a good place to pick up a couple of tips for improving the way we develop websites and apps for multiple devices. Here are a couple of CSS tips to help you out.

Tip 1: Don’t use device specific breakpoints

Hopefully this goes without saying, but just in case you need a reminder or you haven’t come across this best practice before, I thought it was worth reiterating.

Device specific breakpoints are easily identified in your code with media queries that look like this (comments added for clarity):

/* ipad portrait */
@media screen and (min-width: 768px;) {}

/* ipad landscape */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}

These breakpoints have been set up for Apple devices and have “magic number” values such as 768px or 1024px.

What if a user’s window is 1025px or 1023px?

The media queries wouldn’t take affect and the styles for that device size would not apply.

Sometimes you may need a very specific value for your breakpoint (more on that in a second) but seeing these device specific breakpoints is a code smell as far as I’m concerned.

So what should you do instead?

Tip 2: Set major breakpoints and minor tweakpoints

When working on a responsive project, I tend to set arbitrary whole-number breakpoints that are approximately the dimensions of the majority of phones, tablets, and desktop/laptop devices.

I would tend to use the following major breakpoints (although sometimes this may be altered on a project by project basis):

/* large phones and small tablets */
@media screen and (min-width: 500px;) {}

/* tablets and small monitors */
@media screen and (min-width: 800px;) {}

/* laptops and desktops */
@media screen and (min-width: 1200px;) {}

Using these breakpoints doesn’t limit the design to only change at these points but gives a good foundation for working with the three major device types.

For content-based tweaking of the design (ie: when the content starts to look broken, unbalanced, or doesn’t quite fit) you can then use tweakpoints to nudge elements around and polish the details of your project.

/* tweak position of share button */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}

Tip 3: Use em or rem as your breakpoint units

Instead of px, use one of these relative units for better scalability if the user zooms the page or increases the size of the text. As an example, my major breakpoints above would look as follows when sized in ems.

/* 500px / 16px = 31.25em */
@media screen and (min-width: 31.25em;) {}

/* 800px / 16px = 50em */
@media screen and (min-width: 50em;) {}

/* 1200px / 16px = 75em */
@media screen and (min-width: 75em;) {}

Frequently Asked Questions (FAQs) about CSS Media Queries and Breakpoints

What are the best practices for setting CSS breakpoints?

CSS breakpoints are essential for creating responsive designs. They allow the layout to change at predefined points, i.e., having different layouts for different screen sizes. The best practices for setting CSS breakpoints include starting with the mobile layout first and then working your way up. It’s also recommended to use em or rem units instead of pixels for breakpoints as they are more flexible and accessible. Lastly, avoid using too many breakpoints. Stick to the standard sizes for mobile, tablet, and desktop.

How can I use CSS media queries for responsive design?

CSS media queries are a powerful tool for creating responsive designs. They allow you to apply different styles for different devices with different screen sizes. You can use them in your CSS by using the @media rule, followed by the condition for the media feature (like max-width or min-width), and then the CSS styles you want to apply.

What are the standard CSS breakpoints for responsive design?

The standard CSS breakpoints for responsive design are generally as follows: 320px for mobile, 768px for tablet portrait, 1024px for tablet landscape and small desktop, and 1200px for large desktop. However, these are not hard and fast rules and can be adjusted based on the specific needs of your design.

How can I test my CSS breakpoints?

You can test your CSS breakpoints using the inspect tool in your browser. This tool allows you to simulate different screen sizes and see how your layout responds. Additionally, you can use online tools like BrowserStack or responsive design testing websites to test on different devices and screen resolutions.

Can I use CSS media queries to target specific devices?

Yes, you can use CSS media queries to target specific devices. However, it’s generally not recommended as it can lead to a maintenance nightmare. Instead, focus on creating a responsive design that works well on all screen sizes.

How can I use CSS media queries to change the font size?

You can use CSS media queries to change the font size based on the screen size. For example, you might want to increase the font size for larger screens to improve readability. You can do this by defining a media query with the desired screen size and then setting the new font size.

What is the difference between min-width and max-width in CSS media queries?

The min-width and max-width in CSS media queries refer to the minimum and maximum viewport sizes at which the styles inside the media query will apply. Min-width is used to apply styles for any viewport size that is greater than the value specified, while max-width applies styles for any viewport size that is less than or equal to the value specified.

Can I use CSS media queries with JavaScript?

Yes, you can use CSS media queries with JavaScript using the window.matchMedia() method. This method returns a MediaQueryList object representing the results of the specified CSS media query string, which can then be used to apply different JavaScript functionalities based on the screen size.

How can I handle high-resolution screens with CSS media queries?

You can handle high-resolution screens with CSS media queries using the resolution media feature. This feature allows you to apply styles based on the pixel density of the screen. For example, you might want to serve higher-resolution images for high-density screens to ensure they look sharp and clear.

Can I use CSS media queries to detect dark mode?

Yes, you can use CSS media queries to detect if the user has set their system to dark mode. You can do this using the prefers-color-scheme media feature. This feature allows you to apply different styles based on the user’s preferred color scheme, i.e., light or dark.

Guy RoutledgeGuy Routledge
View Author

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

AdvancedCSSaleczandergAtoZ CSS
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week