@media Rule in css

@media  Rule  :

Definition and Usage

The @media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media queries.
Media queries look at the capability of the device, and can be used to check many things, such as:
  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
  • and much more


Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (min-width: 600px) {
    body {
        background-color: orange;
    }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>


Use the @media rule to make responsive design:
@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    
}


    .gridmain {

        width:100%;
    
}


    .gridright {

        width:100%;
    
}

}



Previous
Next Post »