CSS Breakpoints: How to use them to create responsive websites

People access your website from multiple types of devices like phones, tablets, laptops, desktop computers, Smart TVs and probably someone browsers the internet using a Smart Refrigerator.

Being responsive is mandatory if you want your website to look good on all these devices. Plus, Google mobile-first indexing will take a toll on your SEO too.

There are multiple ways of making a website responsive and ready for all these different types of devices. Probably the first and best way of getting started with is by using CSS breakpoints.

What are CSS breakpoints?

CSS breakpoints are instructions that allow a browser to understand how your website will look on a device with a certain width or parameter, like screen width in pixels, the device pixel ratio or orientation (landscape or portrait).

Media queries are an important part of using CSS breakpoints, they allow you to define under which circumstances or scenarios the instructions inside the media query will act.

Looking at the image below we can see how the CSS breakpoints act if the website is being accessed from a laptop or from a mobile phone. We can see how the two sections below the hero image transform from a two-column layout to one column.

There's more to CSS breakpoints and is the possibility to use something called Art Direction. Using this technique you can show different images based on the user device, read more about How to use Art Direction here

How to use CSS breakpoints

As a matter of fact, three things to take into account when defining CSS breakpoints or which media queries you'll use: layout or content, device orientation, and width.

Although the device pixel ratio is another thing, probably you are not going to change the device layout based on the device pixel ratio. However, you want to use high-quality images. Read more about using responsive images here.

Simplifying things, you can start by setting up your media queries. Based on the minimum width or maximum width of the device.

If you are building your layout with a mobile-first approach, then use min-width breakpoints and work your way up.

If you are building your layout for larger devices first, you can set your default CSS as you normally would and then define the media queries for smaller devices.

CSS breakpoints template

/* Here you can put your regular CSS code for desktop */

@media only screen and (min-width: 768px) and (max-width: 959px){

/* Here you can put the styles that will be applied for tablets */

}

@media only screen (max-width: 768px){

/* Here you can put the styles that will be applied for phones */

}

Using breakpoints with SASS

Using a pre-processor like SASS will allow you to write less code and make it more maintainable in the future. Plus, you can use Mixins that'll make your code more readable and easier to understand.

SASS template with variables

$phone-max: 599px;$ phone-landscape-min-width: 600px; $phone-landscape-max-width: 899px;$ tablet-landscape-min-width: 900px; $tablet-landscape-max-width: 1119px;$ desktop-min-width: 1200px; $desktop-max-width: 1759px;$ big-desktop-min-width: 1800px;

@media (max-width: $phone-max) { /** styles for phones **/ /** you can avoid using this if you are doing the mobile-first approach */ }

@media (min-width: $phone-landscape-min-width) and (max-width: $phone-landscape-max-width) { /** styles for phones on landscape or tablets **/ }

@media (min-width: $tablet-landscape-min-width) and (max-width: $tablet-landscape-max-width) { /** styles for tablets on landcape or small desktop **/ }

@media (min-width: $desktop-min-width) and (max-width: $desktop-max-width) { /** styles for desktop **/ }

@media (min-width: $big-desktop-min-width) { /** styles for big desktop screens **/ }

SASS template with Mixins

@mixin phone-only { @media (max-width: 599px) { @content; } } @mixin phone-landscape-or-tablet { @media (min-width: 600px) and (max-width: 899px) { @content; } } @mixin tablet-landscape { @media (min-width: 900px) and (max-width: 1119px) { @content; } } @mixin desktop { @media (min-width: 1200px) and (max-width: 1759px) { @content; } } @mixin big-desktop { @media (min-width: 1800px) { @content; } }

Here's an example on how to apply one of those Mixins in your code and properly set your CSS breakpoints for your styles.

.blog-title {
font-size: 4rem;

@include phone-only {
font-size: 2rem; } }

Recommendations

Set your breakpoints in one separate file with the variables
Define your breakpoints before doing anything else
Don't use too many breakpoints or you'll go crazy
Try to avoid using breakpoints for specific devices unless extremely necessary.

How to use optimized Responsive Images -http://w4y.80f.myftpupload.com/image-optimization/how-to-use-optimized-responsive-images/

How to use Art Direction - http://w4y.80f.myftpupload.com/responsive/art-direction-showing-different-images-per-device/

Google mobile-first indexing - https://developers.google.com/search/mobile-sites/mobile-first-indexing