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). |
|
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.