Slide 1
Most trusted JOB oriented professional program
DevOps Certified Professional (DCP)

Take your first step into the world of DevOps with this course, which will help you to learn about the methodologies and tools used to develop, deploy, and operate high-quality software.

Slide 2
DevOps to DevSecOps – Learn the evolution
DevSecOps Certified Professional (DSOCP)

Learn to automate security into a fast-paced DevOps environment using various open-source tools and scripts.

Slide 2
Get certified in the new tech skill to rule the industry
Site Reliability Engineering (SRE) Certified Professional

A method of measuring and achieving reliability through engineering and operations work – developed by Google to manage services.

Slide 2
Master the art of DevOps
Master in DevOps Engineering (MDE)

Get enrolled for the most advanced and only course in the WORLD which can make you an expert and proficient Architect in DevOps, DevSecOps and Site Reliability Engineering (SRE) principles together.

Slide 2
Gain expertise and certified yourself
Azure DevOps Solutions Expert

Learn about the DevOps services available on Azure and how you can use them to make your workflow more efficient.

Slide 3
Learn and get certified
AWS Certified DevOps Professional

Learn about the DevOps services offered by AWS and how you can use them to make your workflow more efficient.

previous arrow
next arrow

How to add Media Query in your HTML Websites?

Spread the Knowledge

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; }

Example:

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

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; } }

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; }
    }

See the result: