How to target desktop, tablet & mobile using Media Query and Breakpoints

What is Media Query and Breakpoints?

Media query is used to create a responsive web design. The main purpose of responsive web design is to develop a clear view of a website on different gadgets. There should be no damage /breakage to the visibility of web content for different screen sizes.

This is the reason you need a Breakpoint to prevent your webpage from malfunctioning. Breakpoints specify how much screen resolution and width are going to deform the view for what device. So, it is a pixel value for the screen. The Breakpoint is also called Media Query Breakpoint.

Example: The BrowserStack Home Page must be clearly visible on your laptop/desktop and as well as mobile without any issue. Media Query is used to maintain the Breakpoint of the website and is written in CSS language. 

Also, we can use HTML, JavaScript, and many more for creating media queries. 

Media queries can be used to check these properties:

• Width and height of the viewport
• Width and height of the device
• Orientation
• Resolution

Chrome DevTools provides a Media Query Inspector to inspect and trigger breakpoints within a page which will be explained in the following sections

What kind of Testing is performed by Media Queries?

Media query checks which media is suitable for which CSS code. A media type ex. Print, screen etc., reveal this thing to the browsers.

Here are the different media types listed below –

• All: Using all media devices.
• Print: Using printers.
• Screen: For computer screens, smartphones, tablets etc.
• Speech: For screen readers.

You have to pass a rule or test called Media Expression by the CSS code for which it is applied. If the media type is correct and the test becomes successful, then a set of CSS rules should be applied.

When is a Breakpoint Added?

Breakpoint and media query are dependent on each other. Media query simply shows the value of the Breakpoint. So, you can say a breakpoint is a media query.

We use breakpoints to view and read web content easily. Breakpoint prevents a paragraph, text or image from any visibility deformation. It assigns both increasing and decreasing screen sizes. Due to the change in screen sizes, the content becomes harder to see and read. In that case, you must have to apply a standard responsive breakpoint to stop the disruption.

Here is the standard responsive breakpoints list, used across mobile, desktop, and tablet:

• 1920×1080 (8.89%)
• 1366×768 (8.44%)
• 360×640 (7.28%)
• 414×896 (4.58%)
• 1536×864 (3.88%)
• 375×667 (3.75%)

Media Query for Mobile

Implementing a responsive web design for mobiles is more challenging as they have small screen sizes. Another challenge is creating the desktop view on a mobile screen. Thus, software developers use Mobile-First Approach to create a responsive website for mobile.

• In this approach, the CSS code is written for mobile view. 
• Min-width media queries and landscape orientation are applicable to this approach. 
• Later, the CSS code can be embedded with a media query for increasing width, and additional requirements can be added for desktop users.

Bootstrap is a well-known framework for highly mobile responsive web design because it can resize all screen sizes in a good way.

Syntax:

@media (min-width: 640px) { 
// CSS properties
}

CSS with media query for mobile-first approach:

* Initial layout for desktop first */
* {
box-sizing: border-box;
font-family: "Mukta", sans-serif;
color: rgb(10, 146, 10);
}

main {
overflow-y: scroll;
height: 100vh;

padding: 40px;
}

body {
margin: 0;
display: grid;
grid-template-rows: 260px 1fr;

max-height: 100vh;
overflow: hidden;
}

h1 {
margin-top: 0;
font-size: 24px;
line-height: 1;
text-transform: uppercase;

margin-bottom: 12px;
}

p {
margin: 0;
font-size: 16px;
font-weight: 300;
}

section {
display: flex;
flex-direction: column;

justify-content: center;
align-items: center;
/* display: block; */
margin-left: 7vw;
border-bottom: solid 1px #dbdce1;
border-right: none;
align-items: center;
}

section img {
border-radius: 50%;
width: 150px;
}

.projects img {
width: 100%;
}

.projects {
margin-top: 32px;

display: grid;

grid-template-columns: repeat(1, 1fr);
gap: 30px;

align-items: center;
}

/* Media Queries */
@media (min-width: 640px) {
.projects {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}

@media (min-width: 768px) {
.projects {
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}

h1 {
font-size: 40px;
}

p {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.projects {
grid-template-columns: repeat(4, 1fr);
gap: 60px;
}
}

@media (min-width: 640px) and (orientation: landscape) {
body {
grid-template-columns: 160px 1fr;
grid-template-rows: none;
}

section {
border-bottom: none;
margin-left: -4px;
border-right: solid 1px #dbdce1;
}

section img {
width: 140px;
}
}

Media Query Resolution for All Devices

A media query permits and delivers a style sheet for various screen sizes and resolutions for different devices. But before applying a style sheet, the associated media query needs to become true for that media, and then the sheet becomes applicable.

Note: Media query contains @media rule, which includes a block of CSS properties. This rule is used when a certain condition becomes true. These conditions are several media features like width (max-width, min-width), height, color, grid, aspect ratio, resolution, orientation, etc.

Screen resolutions help to reduce friction, and it causes better results for responsive web design.

Screen resolutions for different devices are listed below:

There are some other aspects for friction cutting which are:

• Give preference to the vital menu options.
• Avoid visual distractions.
• Remove unnecessary fields.
• Concentrate on fluidity of search and filter options.
• Highlight the significant CTA (Call to Action). It is a text element which indicates to take an action for the user. Ex. buy a product, sign up for a free trial subscription newsletter, leave a comment etc.

Media query for non-responsive and responsive CTA:

/* General CSS */

html {
font-family: "Helvetica Neue", Helvetica, Arial;
}

body {
font-size: calc(1.2em + 0.5vw);
}

h1 {
font-size: 1.25em;
font-weight: normal;
}

hr {
width: 40%;
margin-top: 1.5em;
margin-bottom: 1em;
margin-right: 100%;
}

/* Button Styling */

.non-resp {
display: block;
height: 6.25rem;
width: 30rem;
background: #606060;
color: #ffffff;
text-align: center;
font-weight: bold;
font-size: 3rem;
line-height: 6.25rem;
font-family: Arial;
border-radius: 20px;
text-decoration: none;
}

.resp {
display: block;
height: 18vh;
line-height: 18vh;
width: 34.5vw;
min-width: 200px;
background: #606060;
color: #ffffff;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: Arial;
border-radius: 20px;
text-decoration: none;
padding: 2px 5px;
}

.resp:hover, .non-resp:hover {
opacity: 80%;
}

@media (min-width: 50em) {
.resp {
font-size: 5vw;
}
}

Note: The output becomes a Sign me up!

CSS media query for various device-width responsive web design

<!DOCTYPE html>
<html>

<head>
<title>CSS media query</title>
<style>
body {
text-align: center;
}

.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}

@media screen and (max-width:800px) {
body {
text-align: center;
background-color: green;
}
.gfg {
font-size: 30px;
font-weight: bold;
color: white;
}
.geeks {
color: white;
}
}

@media screen and (max-width:500px) {
body {
text-align: center;
background-color: blue;
}
}
</style>
</head>

<body>
<div class="ces">ComputerEasySchool</div>
<div class="kids">A computer science portal for kids</div>
</body>

</html>

Media Query Testing Tool

Chrome Dev Tools has a feature to trigger a media query breakpoint without resizing a browser viewport manually. You can do this by using the Media query Inspector, it also inspects a breakpoint. The process is quite simple.

1. The initial stage implies activating the Device toolbar.
2. Then ensure the Show media queries option is enabled.
3. Finally, you can click on different horizontal bars. They represent different media queries (or, you can say, registered media queries). 

The breakpoints become triggered by clicking on horizontal bars.

Sample query:

This is a sample media query with CSS.

@media only screen and (min-device-width: 320px) and (max-device-width:480px)
{ 
header { /* Extra styles */ }
}

To Wrap Up!

Adding responsive breakpoints and media queries improves the overall user experience of a website. Moreover, it makes the website easy to navigate, which helps visitors to find the details they are looking for. As a result, the website ranks better on the SERP, and the increased device compatibility further enhances the outlook of the website.

Hopefully, this quick guide has shed ample light on the concepts of media queries and breakpoints and how they help to test responsive web designs on desktops, tablets and mobile.

BrowserStack Live helps in testing responsive web design with media queries and breakpoints. Once a website has been designed and breakpoints incorporated, test them on real devices for their responsiveness. 

Depending on the number of screen sizes in question, checking responsive design is easiest when using a real device cloud.