Okuzeka
Web Development vocabulary · CSS and Layout

Media query

Meaning in web development, with examples

/ˈmiːdiə ˌkwɪri/nounCore term

In web development, media query means: A CSS rule that applies styles only when a condition is true, such as a minimum screen width, dark mode or printing.

In Turkish: medya sorgusu, media query

How it is used

Written with @media, for example @media (min-width: 768px). Media queries are the main tool of responsive design; developers write and adjust them for each breakpoint.

Example sentences

  1. Add a media query so the sidebar moves under the content on mobile.

  2. This media query switches the colors when the user prefers dark mode.

Common collocations

  • write a media query
  • min-width media query
  • print media query
  • prefers-color-scheme
  • responsive designAn approach to building pages so that the same layout adapts to any screen size, from phones and tablets to large monitors.
  • breakpointA screen width at which a responsive layout changes, for example from one column on phones to three columns on desktops.
  • viewportThe visible area of a web page inside the browser window or phone screen, which changes size when the window is resized or the phone is rotated.
  • CSSCascading Style Sheets: the language that controls how HTML looks, including colors, fonts, spacing, layout and animations.

This word in other fields

The same English word can have a different meaning in another field:

More terms: CSS and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: