@media rule

Advertisements

Prev Tutorial Next Tutorial

@media rule

@media rule is used to define different style rules for different media types or devices. For example font size is different when print page and different on web page. 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, they are;

  • width and height of the browser window
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Syntax


@media not|only mediatype and (media feature) {
    CSS-Code;
}

Media type

valueDescription
allUsed for all media type devices have same style
screenUsed for computer screens, tablets, smart-phones etc.
printUsed for printers

Change the background-color if the window width is smaller than 400 pixels

Example

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

@media screen and (max-width: 400px) {
    body {
        background-color: #eee;
    }
}
</style>
</head>
<body>
<p>Resize your window, when width of page is more 
than 400px, then its background is cyan and if width is 
less than 400px then its background is gray.</p>
</body>
</html>

Same like above example you can design a web page for mobile device, mobile screen is smaller than computer screen, when your web page is open on mobile at that time it behave different.

Media Features

valueDescription
colorSpecifies the number of bits per color component for the output device
max-heightSpecifies the maximum height of the display area, such as a browser window
max-widthSpecifies the maximum width of the display area, such as a browser window

Browser supported

Property
@mediaYesYesYesYesYes

Prev Tutorial Next Tutorial

Advertisements

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

Download Projects

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements