What is Media Query?

  Media Query ! 

• Media query is a query which is used to check if a given condition is true or false and as per that it executes code given in it.

• Syntax:- @media <type> <feature> 

• Ex:-  @media screen (min-width:900px){

H1{

color:red;

}

}

• So we can check to see, for example, if the media is a screen, i.e. being displayed on a device, and the feature is that its minimum width is 900 pixels, so we're checking to see what size the web site is being rendered in.

• When screen will comes to 900px it will change color of mentioned element in media query till that point it will be set to default color which will be black.

• Ex:-  @media screen (min-width:900px) and (max-width:1000px){

H1{

color:red;

}

}

• In above example when our browser window has width between 900 & 1000 px then only it will change the color of element.

• Example:-

@media (max-width:1000px) {

  #title{

    text-align: center;

  }

.title-image{

position: static;

transform: rotate(0);

}

}