Css media

AtoZ CSS: create a responsive design with multimedia queries

This article is part of our CSS AtoZ series. See the full screencast and transcript for Media Queries here.

Welcome to our CSS AtoZ series! In this series, I’ll explore different CSS values ​​(and properties) each starting with a different letter of the alphabet. We know that sometimes screencasts aren’t enough, which is why in this article I’ve added a new quick media query tip / lesson for you.

M is for media queries

I would assume 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, this is a great place to find some tips to improve the way we develop websites and apps for multiple devices. Here are some CSS tips to help you.

Tip 1: don’t use device-specific breakpoints

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

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


@media screen and (min-width: 768px;) {}


@media screen and (min-width: 1024px;) {}


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

These breakpoints were configured for Apple devices and have “magic number” values ​​such as 768px Where 1024px.

What to do if a user’s window is 1025px Where 1023px?

Media queries would not take effect and 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 to me.

So what should you do instead?

Tip 2: Define the middle finger stopping points and minor adjustment points

When working on a responsive project, I tend to set arbitrary breakpoints in integers that roughly match the dimensions of the majority of phones, tablets, and desktop / laptop devices.

I would tend to use the following main breakpoints (although sometimes this can be changed project by project):


@media screen and (min-width: 500px;) {}


@media screen and (min-width: 800px;) {}


@media screen and (min-width: 1200px;) {}

Using these breakpoints does not limit the design to changing only at these points, but provides a good basis for working with the three main types of devices.

To fine-tune the design to suit the content (i.e. when the content starts to look broken, out of balance, or doesn’t quite match), you can then use adjustment points to move the elements around and tweak the details. of your project.


@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}

Tip 3: Use em Where rem as breakpoint units

In the place of px, use one of these relative units for better scalability if the user zooms the page or increases the text size. As an example, my main breakpoints above would look like this when sized in ems.


@media screen and (min-width: 31.25em;) {}


@media screen and (min-width: 50em;) {}


@media screen and (min-width: 75em;) {}