What are Media Queries?

Media queries are probably the most important addition to CSS (Cascading Style Sheets) in decades. They are used to make websites responsive, which means they adapt their layout and style settings depending on the viewing size of the device or screen accessing them.

In simpler terms:
Media queries let you apply different styles settings based on screen size, resolution, orientation, or other media features.

This is especially useful for improving the appearance of a web page on phones, tablets, laptops, and big monitors without needing separate websites.

Basic Syntax:

@media (condition) {
  /* CSS rules here */
}

Common media features:

max-width / min-width: target screen width
@media (max-width: 800px) {

}
orientation: portrait or landscape
@media (orientation: landscape | portrait) {

}

hover: whether the device supports hover 
@media (hover: hover | none) {

}

Why use them?

To create responsive designs that:
Improve appearance on any device
Improve user experience
Follow mobile-first or desktop-first design strategies