Media Queries: Create and Define Break Points
Media queries where introduced in the CSS3 specifications. Put in a simple way, media queries enables the web designer to create conditionals stylesheets based on width, height, but also orientation, color, etc. There’s a huge list of media queries available on the official w3c website but we will only use some of them in our case. Here is a list of the most commonly used media queries and what they do :
Media Query Utilisation
| Media Query | Use |
| min-width: … px | Used when the viewport’s width is bigger or equal to width |
| max-width: … px | Used when the viewport’s width is smaller or equal to width |
| min-device-width: … px | Used when the device’s width is bigger or equal to width |
| max-device-width: … px | Used when the device’s width is smaller or equal to width |
| orientation : portrait // orientation: landscape | Target orientation |
| -webkit-min-device-pixel-ratio : 1.5 | Used to target high density device on android and ios |
Some "tricks" Worth Knowing About Media Queries
Cascade Matters
Yeah that’s right, as for any piece of CSS code, cascade matters.
Consider the following example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| #container{background:rgba(111, 78, 152, 0.9); /*violet */color:rgb(1, 1, 1);@media all and (min-width:500px) { #container{ background: rgba(255, 0, 0, 0.9); /* red */ color: white; }}@media all and (min-width:700px) { #container{ background: rgba(0, 0, 255,0.9); /*blue */ font-family: serif; }} |
See the example on jsfiddle.
If the width of our browser is bigger than
500px, the color of the text gets white, and the background red. If we enlarge the screen up to more than 700px, the background gets blue, but the color of the text stays white because it inherited the color of the min-width:500px media query applied before (700 being, well, bigger than 500).Creating Stacked Media Queries
Consider the following example :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| #container{ background:rgba(111, 78, 152, 0.9); /*violet */ padding:10px 5px; color:rgb(1, 1, 1);}@media all and (min-width:500px) and (max-width:699px) { #container{ background: rgba(255, 0, 0, 0.9); /* rouge */ font-family: serif; }}@media all and (min-width:700px) { #container{ background: rgba(0, 0, 255,0.9); /*bleu */ color: white; font-family: serif; }} |
See the example on jsfiddle.
The first media query will only be applied for screen between
500px and 699px, and the second for screen bigger than 700px. In the case of stacked media queries, since property is only applied for a certain width, they are not herited. In our example, if we also want to apply a serif font the layout bigger than 700px, we will have to repeat this property.
You’ll need a viewport meta tag to make the media queries work. The viewport meta tag enables you to take control of the viewport of the device. Basically, if no viewport is set, mobile device will try to fit the whole page on the screen, resulting in very small websites.
The viewport meta tag looks like this:
1
| <meta name="viewport" content="initial-scale=1, width=device-width"> |
We basically tell the device, that we will be using the device width as the width of our page, and that there will be no zooming on the page when we first launch it.
0 Comments