CSS3 Media Queries Tutorial and CSS3 Media Queries Reference

Published on: October 9, 2014   Last Updated on : June 5, 2018   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 Queries 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 Queries with in a style tag.

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

  • CSS 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>

All CSS Media Types Reference

CSS Media Types Tutorial And CSS Media Types Reference: Media refers to the type of device used to display a webpage, such as a computer screen or cell phone. Most Commonly media types are: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv etc.

CSS Media Types

CSS Media Type Description
all

Suitable or intended for all devises (default).

aural

Suitable or Intended for speech synthesizers.

braille

Suitable or Intended for braille tactile feedback devices.

embossed

Suitable or Intended for paged braille printers.

handheld

Suitable or Intended for handheld devices (typically small screen, monochrome, limited bandwidth).

print

Suitable or Intended for printed documents (applies to docs viewed in print preview mode too).

projection Suitable or Intended for projected presentations (projectors or print to transparencies).
screen Suitable or Intended for computer screens.
tty Suitable or Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv Suitable or Intended for television-type devices.

Also Related to CSS3

 

Leave a Reply