Skip to main content
Practice

Advanced Media Query

Media queries apply different styles based on the Breakpoint, which is determined by the screen size.

A Breakpoint is a term used in responsive web design that refers to specific screen widths or device characteristics where the web page layout must change.


Key Breakpoint Values​

You can set breakpoints freely for each project, but commonly used breakpoint values are as follows:

  • Extra small devices (phones): < 576px
  • Small devices (phones - landscape mode, tablets - portrait mode): ≥ 576px
  • Medium devices (tablets - landscape mode): ≥ 768px
  • Large devices (desktops): ≥ 992px
  • Extra large devices (large desktops): ≥ 1200px

How to Use?​

You can use CSS's @media rule with min-width and max-width to specify breakpoints and define CSS styles that only apply under certain screen conditions.

CSS
/* Default style */
.container {
  width: 100%;
}

/* Style for screens at least 768px wide */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Style for screens no more than 992px wide */
@media (max-width: 992px) {
  .container {
    width: 970px;
  }
}

/* Style for screens between 1200px and 1920px wide */
@media (min-width: 1200px) and (max-width: 1920px) {
  .container {
    width: 1170px;
  }
}

Media Query Tips​

  1. Mobile First: Design styles for smaller screens first, then add styles for larger screens.

  2. Use Variable Units: Whenever possible, use variable units (em, rem, %) instead of fixed units (px) to increase flexibility.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.