How to use Media Query in CSS for a responsive webpage?

A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color.

Syntax: –

@media not|only mediatype and (expressions/ media features) {   CSS;  }

Ex: –

@media screen and (min-width: 480px) {

    body {

        background-color: lightgreen;    }

}

@media (min-width: 480px) {

    body {

        background-color: lightgreen;    }

}

  • all – Used for all media type devices
  • print – Used for printers
  • screen – Used for computer screens, tablets, smart-phones etc.
  • speech – Used for screenreaders that “reads” the page out loud

If you use the not or only operators, you must specify an explicit media type.

And-

  • @media (min-width: 800px) { CSS }
  • @media (min-width: 800px) and (orientation: landscape) { CSS }
  • @media screen and (min-width: 800px) and (orientation: landscape) { CSS }

Or (Comma , )-

  • @media (min-width: 800px), (orientation: landscape) { CSS }

Not-

  • @media not all and (min-width: 800px) { CSS }
  • @media not (all and (min-width: 800px)) { CSS }
  • @media (not all) and (min-width: 800px) { CSS }
  • @media not screen and (color), print and (color) { CSS }
  • @media (not (screen and (color))), print and (color) { CSS }
Tagged : / / / /