How to Target Desktop, Tablet & Mobile using Media Query and Breakpoints

Websites must effortlessly adapt to screens of all sizes, from desktops and tablets to smartphones. CSS media queries and breakpoints are the foundation of responsive web design which allows developers to create flexible layouts that adjust based on device characteristics.

Desktop media queries are CSS rules that apply styles specifically to screens with widths typically 1024px or larger, allowing websites to adjust layout and design for optimal viewing on desktop and laptop devices.

This article explores how to write effective media queries for desktop, tablet, and mobile layouts, along with common breakpoints, best practices, and testing tips for truly responsive design.

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%)

Mobile-first vs Desktop-first Media Queries

Mobile-first and desktop-first are two different approaches to structuring your responsive CSS using media queries:

Mobile-first

In this approach, you write your base styles for smaller screens (typically mobile devices), and then use min-width media queries to progressively enhance the design for larger screens like tablets and desktops.

Example:

css

/* Base styles for mobile */

body {

  font-size: 14px;

}




/* Tablet and up */

@media (min-width: 768px) {

  body {

    font-size: 16px;

  }

}




/* Desktop and up */

@media (min-width: 1024px) {

  body {

    font-size: 18px;

  }

}

Best for performance and future-proofing, as it ensures mobile users receive minimal CSS first.

Desktop-first

Here, your base styles target larger screens (desktops), and you use max-width media queries to adjust the layout for smaller screens like tablets and phones.

Example:

css

/* Base styles for desktop */

body {

  font-size: 18px;

}




/* Tablet and below */

@media (max-width: 1024px) {

  body {

    font-size: 16px;

  }

}




/* Mobile */

@media (max-width: 767px) {

  body {

    font-size: 14px;

  }

}

Useful when the primary audience uses desktops, or if the desktop layout is more complex.

Here are the key differences between having a mobile-first and desktop-first strategy using CSS:

Talk to an Expert

Media Query for Desktop

Media queries for desktop screens are used to apply CSS styles specifically when the viewport width reaches a typical desktop resolution. This allows you to adjust layout, font sizes, and component behavior for users on larger screens.

Syntax for Desktop Media Query

Use max-width if following a desktop-first approach:

css

/* Base desktop styles */




@media (max-width: 1024px) {

  /* Adjustments for tablets and below */

}

Common Desktop Breakpoints

These breakpoints can vary based on your layout or analytics, but 1024px is generally the minimum width for desktop targeting.

Example Usage

css

/* Desktop layout with sidebar and wider content */

@media (min-width: 1280px) {

  .main-content {

    display: flex;

    gap: 20px;

  }




  .sidebar {

    width: 300px;

    display: block;

  }

}

Best Practices to follow when using Media Query for Desktop

• Use max-width for desktop-first designs: Start with styles for larger screens (desktop) and use max-width media queries to adjust for tablets and mobile devices.
• Avoid hardcoding to specific devices: Use breakpoints based on content needs, not device names.
• Test on multiple screen sizes: Use real device testing tools or BrowserStack to ensure consistency across resolutions.
• Keep layout fluid: Combine media queries with flexible grids and percentage widths for better scaling.
• Group related rules: Keep all desktop-related queries together to maintain clean, maintainable CSS.

Media Query for Tablet

Tablets fall between mobile phones and desktops in screen size, typically ranging from 600px to 1024px in width. Crafting CSS rules specifically for tablets ensures your layout remains user-friendly and visually consistent across these mid-sized devices.

Common Tablet Breakpoints

You can adjust these values based on your design system and analytics data.

Media Query Syntax for Tablets

Mobile-first (using min-width and max-width):

css

@media (min-width: 768px) and (max-width: 1023px) {

  /* Styles for tablets */

  .grid-layout {

    grid-template-columns: 1fr 1fr;

  }

}

Desktop-first (using only max-width):

css

@media (max-width: 1023px) {

  /* Adjust layout for tablet and smaller */

  .sidebar {

    display: none;

  }

}

Use Cases for Tablet Media Queries

• Rearranging grid or flexbox columns into fewer columns
• Increasing font sizes for readability
• Making touch targets larger
• Hiding less relevant content like sidebars

Best Practices for Tablet Media Query

• Don’t assume all tablets are used in landscape mode. Also support portrait and landscape orientations.
• Use min-width + max-width ranges to avoid overlap with mobile or desktop styles.
• Test on real devices especially for iPads and Android tablets with varying resolutions.

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:

Call-to-action (CTA) elements play a critical role in user engagement, and using media queries ensures they remain visible, accessible, and clickable across all device sizes—whether adapting a non-responsive CTA or enhancing a responsive one.

Here is an example of how to apply 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

CSS media queries allow you to tailor your website’s layout and styling to different screen widths, enabling a responsive design that adapts seamlessly to mobile, tablet, and desktop devices.

<!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>

Common Media Query Breakpoints for Mobile, Tablet, and Desktop

Breakpoints are the screen widths at which your website layout should change to provide an optimal viewing experience.

These values act as general guidelines and can be adjusted based on your design needs.

Standard Device Breakpoints

Best Practices for Writing Media Queries

Writing effective media queries goes beyond targeting device widths. Good media queries ensure maintainability, performance, and design consistency across devices. Here are key best practices:

1. Use Mobile-First with min-width

Start with base styles for mobile and layer on styles for larger devices using min-width. This improves load performance and aligns with modern browsing habits.

css

/* Base styles for mobile */

.container {

  padding: 10px;

}




/* Adjust for tablets and larger screens */

@media (min-width: 768px) {

  .container {

    padding: 20px;

  }

}

2. Avoid Targeting Specific Devices

Don’t write queries like @media (device-width: 375px). Devices vary widely, so base breakpoints on content layout needs instead of device names.

3.  Keep Breakpoints Meaningful

Choose breakpoints based on where your design breaks, not arbitrary numbers. Use design-driven breakpoints such as:

css

@media (min-width: 640px) { ... } /* small tablets */

@media (min-width: 768px) { ... } /* tablets */

@media (min-width: 1024px) { ... } /* desktops */

4. Use Relative Units (em, rem)

Instead of pixels, use relative units for breakpoints. This ensures your media queries respond to user zoom and base font settings.

css

@media (min-width: 48em) {

  /* Scales with user's settings */

}

5. Organize Media Queries Logically

Group your media queries by component instead of scattering them. You can either:

• Inline queries with components (modular CSS or SCSS)
• Or group them at the bottom, consistently across files.

6. Avoid Overlapping Ranges

Ensure there’s no overlap or gap between your breakpoints. For example:

css

@media (max-width: 767px) { ... }

@media (min-width: 768px) { ... }

7. Test Across Real Devices

Always test how your media queries behave on actual devices, not just browser emulators. Tools like BrowserStack Live allow real device testing to catch edge cases.

8. Use Logical Combinations When Needed

Combine multiple conditions (for example, width and orientation) for finer control:

css

@media (min-width: 768px) and (orientation: portrait) {

  ...

}

9. Avoid Too Many Breakpoints

More breakpoints means harder maintenance. Stick to 3 to 5 well-placed breakpoints based on real layout needs.

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 */ }
}

Conclusion

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 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.

Try BrowserStack Now