HuntExams Academy
HTML/CSSBeginner#css#responsive#media-queries

What are CSS media queries and how do you write a mobile-first stylesheet?

Media queries apply CSS conditionally based on viewport size, orientation, or device features. Mobile-first means writing base styles for small screens first, then progressively enhancing with min-width breakpoints for larger screens.

Example
.card { width: 100%; }
@media (min-width: 768px) {
  .card { width: 50%; }
}
@media (min-width: 1024px) {
  .card { width: 33.33%; }
}

Related Questions

1
HTML/CSSIntermediate#css#responsive

What is the difference between responsive and adaptive design?

Open
2
HTML/CSSBeginner#css#units

What are the different CSS units (px, em, rem, %, vw, vh) and when to use them?

Open
3
HTML/CSSIntermediate#css#variables

What are CSS custom properties (variables) and how do you use them?

Open