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