CSS Media Queries

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Using media queries is a popular method for delivering a tailored style sheet ( responsive web designing ) to desktops, laptops, tablets, and mobile phones.

CSS media queries enable you to format your documents to be presented correctly on different sizes of output devices.

Media queries can be used to check many things, such as:

• width and height (of the browser window)
• device width and height
• orientation – for example is a phone in landscape or portrait mode?
• resolution

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not | only mediatype and (expressions) {
  CSS-Code;
}

CSS3 Media Types

all

Default. Used for all media type devices.

screen

Used for computer screens, tablets, smart-phones etc.

Simple example of the media query for standard devices.

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}

Mobile first approach

/* Extra small devices (phones, less than 768px) */
/* No media query since this will be the default in mobile first approach */
  
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
  
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
  
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

print

Used for printers (applies to docs viewed in print preview mode too).

@media print {
   /* styles */
}

If you are defining your style sheet in a separate file, then you can also use the media attribute when linking to an external style sheet. like the following example

<link rel="stylesheet" type="text/css" media="print" href="print.css">