16 September 2017

CSS @media rule

CSS @media rule

@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


@media not|only mediatype and (media feature) {

Media type

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


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

@media screen and (max-width: 400px) {
    body {
        background-color: #eee;
<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>
Anonymous said...

Good post

Start typing and press Enter to search