CSS: @media query (responsive design)

What is media query

Media Query applies a set of CSS rules only when a condition is met. Most often used to set CSS depending on user's screen width.

basic syntax:

@media conditionalExpression { cssRules }

Media Queries is new in 2012.

Example. viewport width less than

@media (width < 600px) {
 body {
  background-color: yellow;
 }
}

Once you set the rule, you can drag to change window size to see its effect in realtime.

Example. viewport width greater than

@media (width > 1000px) {
 body {
  background-color: cyan;
 }
}

Example. viewport size between

If viewport width is between 1000px and 1500px.

@media (1000px < width < 1500px) {
 body {
  background-color: cyan;
 }
}

Syntax using min-width max-width vs greater than lesser than operator

The syntax using comparison operators are new, supported by all browser since 2024. available are:

> >= < <=

before, you must use the old syntax, e.g. @media (min-width: 1000px) and (max-width: 1500px) {}

@media (width <= 600px) {}
/* same as */
@media (max-width: 600px) {}

/* s------------------------------ */

@media (width >= 1000px) {}
/* same as */
@media (min-width: 1000px) {}

/* s------------------------------ */

@media (1000px <= width <= 1500px) {}
/* same as */
@media (min-width: 1000px) and (max-width: 1500px) {}

Logical Operators

commonly used operators and orientation

@media (width > 400px) and (height > 500px) {
 /* some */
}

@media not (width < 300px) {
 /* some */
}

@media (orientation: portrait) {
 /* some */
}

What is responsive design

Responsive Design means using Media Query to design site such that different screen size results in different design. (desktop big display, or cell phone tiny display) .

Example. using rem for responsive design

It's better to use rem unit instead of pixels. On phone or laptop, many people have enlarged font, via system or browser. On a phone with 320px width, if the font is enlarged, the width may become smaller e.g. 280px, but if you use pixel unit for responsive design, it still is 320px. If you use rem, the width adjust according with user's font size.

• CSS: Length Units

/* Base = phones (no media query needed) */
.container {
 padding: 1rem;
 /* single column, etc. */
}

/* Larger phones  */
@media (width > 40rem) {
 /* 40rem is 640px, by default root font size of 16px */
 /* ... */
}

/* Tablets and up */
@media (width > 48rem) {
 /* 768px */
 /* ... */
}

/* Desktops and up */
@media (width > 64rem) {
 /* 1024px */
 /* ... */
}

Example. show nav panel to left if large screen, else at or bottom

/* show nav panel at left if screen is large */
@media (width > 44rem) {
 main {
  margin-left: 14rem;
 }
 footer {
  margin-left: 14rem;
 }
 .lpanelxl {
  position: absolute;
  top: 0;
  left: 0;
 }
}

Example. Show 2 columns if screen is large

/* show 2 columns if screen is large */
@media (width > 54rem) {
 .x2col {
  column-count: 2;
 }
}