Press "Enter" to skip to content

Media Queries Examples in CSS

Last updated on October 5, 2019

Definition :

Media queries are the decorators are animations which are meant for performing and displaying the result as per browser compatability.

Program :

<html>

<style>

#dd{

width:100px;

height:100px;

background-color:red;

}

@media screen and (min-width:400px)

{

#dd{

background-color:green;

}

}

@media screen and (min-width:600px)

{

#dd{

background-color:yellow;

}

}

</style>                               <body>

<div id=”dd”>

HELLO

</div>                   </body>

</html>   

Program 1 :       

<html>

<style>

@media screen and (orientation:landscape)

{

#dd{

background-color:green;

}

}

@media screen and (orientation:portrait)

{

#dd{

background-color:yellow;

}

}

</style>

                                <body>

<div id=”dd”>

HELLO

</div>                  

                                </body>

</html>                              

                    

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *