The Purpose of Media Queries

Developers today face the crucial task of ensuring their applications' user interfaces (UI) adapt seamlessly to various devices and screen sizes. Neglecting this aspect can lead to reduced engagement and a subpar user experience (UX), potentially putting your product or service at a competitive disadvantage. Media queries, a cornerstone of web development, enable developers to tailor styles and layouts based on device characteristics like screen size, resolution, and orientation.

Mobile-First and Desktop-First Designs

Mobile-first and desktop-first designs are two approaches to creating responsive websites or applications. A mobile-first approach begins with designing the website or application for mobile devices with smaller screens and scaling up to devices with larger screens. A desktop-first approach begins with designing the website or application for desktop or larger screens and scaling down to devices with smaller screens.

In this illustration, both approaches address varying screen sizes. The desktop-first (responsive) web design begins with a larger screen layout and adapts to smaller displays, while the mobile-first web design starts with a focus on smaller screens and gracefully expands.

When developing an application, the choice between utilizing a mobile-first or desktop-first design depends on your specific project requirements, target audience, and the nature of the content or functionality you're providing. Depending on your approach, you can use media queries to add additional features to larger screens or simplify and remove features for smaller screens.

Breakpoints

Breakpoints in media queries are specific points at which a website's layout and styling change to adapt to different screen sizes. They act like markers that trigger different sets of styles to be applied based on the characteristics of the device or browser window.

Due to the varying widths and heights of screens and devices, pinpointing precise breakpoints for each one can be challenging. To streamline this process, here are some widely-used breakpoints that accommodate a range of devices. Keep in mind that these are general guidelines and can be adjusted based on the specific needs of your project:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* Styles for extra small devices go here */
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* Styles for small devices go here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* Styles for medium devices go here */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* Styles for large devices go here */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* Styles for extra large devices go here */
}

In this example, we have defined different breakpoints based on the width of the screen. They adapt to varying screen sizes. Each media query applies specific styles when the screen falls within the specified range. For instance, the first media query applies to screens with a maximum width of 600 pixels, which is typically for extra small devices like phones.

By using these breakpoints, you can create a responsive design that adapts smoothly to various devices, providing an optimal viewing experience for users across the board.

Learn More

• Using Media Queries
• CSS Media Queries - Examples
• Typical Device Breakpoints