Breakpoint-based Media Queries

Media Queries apply different styles based on Breakpoints, which are conditions related to screen size.

A Breakpoint is a term used in responsive web design to represent the inflection points of screen sizes where the web page layout needs to change.

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

• Extra small devices: < 576px (mobile phones)

• Small devices: ≥ 576px (mobile phones in landscape mode, tablets in portrait mode)

• Medium devices: ≥ 768px (tablets in landscape mode)

• Large devices: ≥ 992px (desktops)

• Extra large devices: ≥ 1200px (large desktops)

You can specify breakpoints using the @media rule in CSS with min-width and max-width, and define CSS styles that only apply under specific screen conditions.

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

/* Style for screen widths of 768px and above */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Style for screen widths of 992px and below */
@media (max-width: 992px) {
  .container {
    width: 970px;
  }
}

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

Adjust the width of the Code Execution Result screen on the right displaying boxes A, B, C, and observe how the Media Queries apply according to the Breakpoints.