How to add Media Query in your HTML Websites?

Media Query:

A media query is a CSS technique introduced in CSS. A media query consists of the optional media type and zero or more expressions that limit the style sheet’s scope by using media features, such as width, height, and color.

Syntax:

@media not only mediatype and (expressions / media features) { CSS; }Code language: CSS (css)

Example:

@media screen and (min-width:480px){
body{
background-color: lightgreen;}
}Code language: CSS (css)

Use can also use these methods:

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

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

By using Logical Operators:

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 screen and (color), print and (color) { CSS }
• @media (not (screen and (color))), print and (color) { CSS }

Here is the example code, you can create a html file:

When using this CSS Code:

    body { background-color: pink;}
    @media screen and (min-width: 600px)
    { body { background-color: red; } }

    @media screen and (min-width: 768px)
    { body { background-color: blue; } }

    @media screen and (min-width: 992px)
    { body { background-color: orange; } }Code language: CSS (css)

Then, See the Result:

Then, using this CSS:

    div {
      width: auto;
      height: 300px;
      background-color: pink;
    }

    p {
      font-size: 15px;
    }

    @media screen and (min-width: 600px) {
      p { font-size: 24px; font-weight: bold; }
    }Code language: CSS (css)

See the result: