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.

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

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.

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

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.