Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Media Types and Media Queries

In this article we will learn a little about the Media Types and going deeper and understand what they are and how to use the Media Queries.

Hello guys, in today's article we will talk about media queries, but let's talk a little about what came before them, the media types.

The Medias Types, basically define which type of media of css will be directed for your website, ie, for each different device that you access a website, you need a different css too.

Below we will see Media Types used:

  • All: For all devices.
  • Screen: For monitors or other devices with color screens and with appropriate resolution.
  • Handheld: For handheld devices. Usually with small screens and limited bandwidth.
  • Embossed: For devices that "prints" in Braille.
  • Tty: For devices using a fixed grid for displaying characters, such as teletypes, terminals, handheld devices with limited display.
  • Print: To print on paper.
  • Braille: For haptic devices.
  • Projection: For presentations, such as PowerPoint.
  • TV: For devices such as televisions, ie with low resolution, color depth and scroll limited.
  • Speech: To voice synthesizers.

These medias are used in accordance with the code below:

Listing 1: Using Media Type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">
 
<html xmlns="<http://www.w3.org/1999/xhtml>" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>Exemplo de Media Type</title>
 
    <link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />   
 
</head>
 
<body>
 
 
</body>
</html>


As we can see, the link tag is calling a css file using handheld media, ie, if you access from a mobile device, smartphone, tablet's, this is the css called and loaded by the website.

This css will only be loaded in this type of device for each different device we access, we have to set a specific css for it, for example if we are the most common that is used to access a desktop media type screen.

Listing 2: Accessing a desktop

 <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

Why are the media types have become a problem?

With the increasing amount of devices of various sizes and hardware with a very good, almost like a desktop, some doubts arose very strong in what media to use, because the most powerful smartphones for example, have a good navigation similar to a desktop, but still are handheld's and can not be considered desktops, or can not provide a CSS to handheld or fully CSS one screen.

Media Queries

As a solution to this "problem" came the Media Queries, they define some conditions for the use of specific css. Like the good old "IF" programming languages​​, she works in a similar way, making the device if the conditions suit that condition you said in the media querie, it will apply that css, otherwise not apply.

Listing 3: Media Queries

<link rel="stylesheet" href="estilo.css" media="screen and (color)" />

In this example, the CSS will be applied in devices media screen, having a characteristic color, or if this device is monochrome css is not applied.

Logical Operators

The Logical Operators are used just to give the Media querie this condition, thus enabling various media queries are created, they are: not, and and only.

Operato Not

The not will make a negative condition

Listing 4:Operator Not

 <link rel="stylesheet" href="estilo.css" media="all and (not color)" /> 

In the code above we have a true sentence for monochrome devices.

Operator Only

The show will not only styles that browsers do not recognize media queries to use it just use the word only before sentencing.

Listing 5: Operator only

 <link rel="stylesheet" href="estilo.css" media="only screen and (color)" /> 

You can also group several media queries separating them with (comma). If either of the queries are true, the CSS is applied. Then the comma acts as an operator or.

Listing 6: Operator or

<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />

Media features

To differentiate one from another device, you need to use the characteristics of each, for this we use the Media Features.

Listing 7: Media Features

<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

In this example we specified that the css is applied only on devices and media screen that their screens have a maximum resolution of 480px.

Below I will list some features that can be used to select and set the devices to be used.

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Conclusion

Unfortunately not all browsers that support media queries, they are mainly used to separate css website css desktop with the mobile site, thereby improving your user experience on mobile devices.

I hope you enjoyed and to the next article.

Ricardo Arrigoni - Front-end Developer



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login