CSS – Media Queries

@media at-rules, used to target styles at specific media, such as screen or print.A page can then be optimized and laid out completely differently for mobile phonestablets, and varying browser window sizes.

@media screen {

    body { font: 12px arial, sans-serif }
    #nav { display: block }

}

Browser-size specific CSS

@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

This is telling a browser to apply a block of CSS when its viewport is 1000 pixels wide or less. You could use this to do something as simple as making a content area or navigation narrower or you could completely re-arrange a page layout.

also you can apply more than 1 @media rule.

@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

@media screen and (max-width: 800px) {

    #nav { float: none }

}

@media screen and (max-width: 600px) {

    #content aside {
        float: none;
        display: block;
    }

}

Orientation-specific CSS

If you have a hankering for applying CSS depending on the orientation of the browser, fill your boots with something like the following:


@media screen and (orientation: landscape) {

    #nav { float: left }

}

@media screen and (orientation: portrait) {

    #nav { float: none }

}

This could be specially useful with mobile devices.

 

Leave a Reply

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