CSS Media Queries

Media Queries

CSS media queries are a powerful tool used by web developers to create responsive websites. They allow developers to write code that will make a website look different depending on the size of the device that it is being viewed on. This means that one website can be tailored to look great on a desktop, a laptop, a tablet, and a phone, all without having to create multiple versions of the same website.

CSS media queries are written using the @media rule. This rule takes a media type (such as screen or print) and a condition (such as width or orientation) and applies the code within the brackets only when the condition is met. For example, a media query could be written to only apply the code if the device has a width of less than 600px.

Media queries are used for the following:

  • To conditionally apply styles with the CSS @media and @import at-rules.
  • To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.
  • To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

CSS3 Media Types: all, print, screen, speech


<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />


@media screen {
  body {
    width: 75%;
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;