programplug Logo




CSS @media rule

The @media rule is allow to define the different style of rules in different platform of media types or a devices.

For example if we want to print the page on a different web page then this is called media types in CSS2 but in CSS3 it is called media queries.
The media queries can be used to check many style such as:
  • It can measure the height and width of the device.
  • It check the browser window of width and height
  • It check the resolution.
  • Measure the orientation(in tablet/mobile phone in landscape or in portrait mode ?)
Syntax
@media not|only mediatype and (media characterstic) 
{
attribute
}
     

To change the background-color if we want the window width is less than 500 pixels.

<html> 
<head>  
<style>  
@media screen and (max-width: 400px)
{
p
{
font-size:10px;
}
}
</style>  
</head>   
<body> 
<p>You can set your window, when the page is greater 
than 500px, then background color is change to yellow and if  the width is 
smaller than 400px then its background is gray.</p>
</body> 
 </html>
  

Output:

You can set your window, when the page is greater than 500px, then background color is change to yellow and if the width is smaller than 400px then its background is gray.

Media feature:

VALUES DESCRIPTION
max- width It is used to display the width area,like browser window.
color It is used for the bits per color in the output device of the component.
max-height It is used to display the height of area, like the browser window.





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy