Most people nowadays use media queries for responsive CSS.

@media screen and (max-width: 767px) { ... }

@media screen and (min-width: 1280px) { ... }

@media screen and (min-width: 768px) and (max-width: 1279px) {
	...
}

Did you know that there is a nicer syntax available?

@media screen and (width < 768px) { ... }

@media screen and (width >= 1280px) { ...  }

@media screen and (768px <= width < 1280px) { ... }

This is called the media query range syntax.

It is common to define breakpoints in pixel values. But you can also use rem and em values, which reacts nicely to user-defined individual font sizes.

@media (width <= 30rem) {
  // Styles for viewports with a width of 30rem or less.
}

What else can you check with media queries?

Orientation media query

You can check whether a device is in portrait or landscape mode:

@media screen and (orientation: landscape) {}
@media screen and (orientation: portrait) {}

And even more specific: if the device (viewport) has a certain aspect ratio:

@media (min-aspect-ratio: 16/9) {}