본문으로 건너뛰기

Advanced Media Queries

Advanced Media Queries

Breakpoints

A Breakpoint is a term used in responsive web design, referring to specific screen widths or device characteristics where the web page layout should change.


Common Breakpoint Values

Breakpoints may vary based on each project and the target devices, but commonly used breakpoint values are as follows:

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

How to Use It?

You use the CSS @media rule to set breakpoints with min-width and max-width.

With this rule, you can define CSS styles that apply only to specific screen conditions.

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

/* Styles when the screen width is 768px or larger */
@media (min-width: 768px) {
.container {
width: 750px;
}
}

/* Styles when the screen width is 992px or smaller */
@media (max-width: 992px) {
.container {
width: 970px;
}
}

/* Styles when the screen width is between 1200px and 1920px */
@media (min-width: 1200px) and (max-width: 1920px) {
.container {
width: 1170px;
}
}

  1. Mobile First: Define styles for smaller screen sizes as the default, and then add styles for larger screens.

  2. Use Flexible Units: Increase flexibility by using relative units (em, rem, %) rather than fixed units (px) whenever possible.