CSS3 Media Queries Tutorial – CSS3 Media Queries Reference

Last Updated on: April 17, 2020   Posted By: Web Design Reference

CSS3 Media Queries Tutorial: 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. In this page to learn Introduction to the CSS media types, Different types of CSS media. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

CSS3 Media Queries: CSS Media Types explanation

CSS Media Type Description
all

Suitable or intended for all devices (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.
 
 

Media Types is used using Media Queries can be used 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 within 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>

 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

 

Leave a Reply