Css3 Media Queries Tutorial

Published on: October 9, 2014   Last Updated on : December 8, 2014   Posted By : WebDesignReference

Css media queries can be used as the following types

How to use a media queries in a web document.

  • Css media query in a link tag or element is used for styling an element if the specified media type comes.

    <link rel=”stylesheet” type=”text/css” media=”(max-width:768px)” href=”responsive-style.css”>

  • Css media query with in a style tag.

    <style>
    @media all (max-width:768px){
    body{
    background-color:red;
    }
    }
    </style>

  • Media queries using external stylesheet.

    <link rel=”stylesheet” media=”(max-width:480px)” href=”responsive-style.css”>

When the specified condition is true then the alternative media query css is applied.

Logical operators in media queries :

  • And
  • Only
  • Not
  • Css Media queries without logical operator.

    <style>
    @media (max-width:768px){
    body{
    background-color:red;
    }
    }
    </style>

  • Css Media queries with And logical operator.

    <style>
    @media all and (max-width:768px){
    body{
    background-color:red;
    }
    }
    </style>

  • Css Media queries with Only logical operator.

    <style>
    @media only screen and (max-width:768px){
    body{
    background-color:red;
    }
    }
    </style>

  • Css Media queries with Not logical operator.

    <style>
    @media not tv and (max-width:768px){
    body{
    background-color:red;
    }
    }
    </style>

 

Leave a Reply