blog

“The importance of media queries on responsive and adaptive”

23 august 2015 | by João Pedro Gomes

Media Queries are one of the most important visual items from a website. Media Queries give to style code a flexibility that can change all structure from the website, based on user's window size. Media Queries can contain one or more expressions, expressed as media features, which resolve by your browser as true or false. The code inside will only work if is true.

"A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself." in Mozilla Developers Web Guide

Media Queries are the HTML/CSS structure that permits to change the div style of the window size. That media type permits that grids can have different number of columns by the width of a window, for example. Both responsive and adaptive web designs use Media Queries, but for different properties.

In responsive the media queries normally are used for defining better div and element size based on window size. In responsive the media queries normally are used for defining better div and element size based on window size. That is a thing important, the responsive takes care about the capacity of elements to be elastic. The dynamic resizing allows you to put the window with the size you want and the visual of the website will always look good.

In adaptive design, the logic is another. You will design two or more versions of websites for specific devices, with different div classes and ids. The emergency of the liberalization of screen size puts this type of design in a way of unpopularity. Today is more used for big website that have a good app for mobile and, I think, they don't offer a good experience on mobile browsers, just a service with lots of limitations that offers you the download of the brand apps for better experience. It's true that apps are more reliable and quick, so I can understand in some way. So, Media Queries on adaptive design are more used for defining code for window sizes based the most used device screen sizes. Another movement of web design is the adaptive responsive, Web sites that are adaptive but demonstrate some responsiveness between the adaptive sizes defined.

Advertisement
Sorry, but I need to pay my articles

So, how look the Media Queries?

First, you need to know that Media Queries can be html or css. Normally are used in cases just to be with the css code inside. But, especially on adaptive design, we define the Media Queries on html to read the css file based on screen size. For that you need to have a.css file for all screen sizes that you define. For example, define a.css file in html based on screen size:

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" >

In Responsive, we normally divide .css files by functions and not by screen sizes. So, we use Media Query directly on css and put the code inside. There is a example for a css Media Query:

@media (min-width: 992px) { ... YOUR CODE ... }

What I need to know about Media Queries?

Well, Media Queries have one of the best and complex syntax of html/css. The tag media="" or @media is used for a lot of behavior delimitations that you will learn with time. Now, I only focused to explain sizing Media Queries. So, that is the 7 things I think you need to know now:

1. Media Queries in use

Some Examples:

@media (max-width: 992px) {
.some-example {
width: 50%;
background-color: #101010;
}
.other-example {
display: none;
}
}

@media (max-width: 768px)
.some-example {
width: 100%;
background-color: #CCC;
}
.other-example {
display: block;
}
}

You can use with the values that best fit in your design. You can use also a number infinite of them. It depends from site structure and visual. I normally use between 6 and 8 to my responsive websites. For example, for this website, I use that structure:

@media (max-width:1900px){}
@media (max-width:1600px){}
@media (max-width:1300px){}
@media (max-width:1100px){}
@media (max-width:992px){}
@media (max-width:640px){}
@media (max-width:420px){}

That structure offers me a flexibility of display that can fit on a window on 7 different ways, that with a percentage based div grid makes the website totally elastic.

2. How write code that affects all site?

Some Examples:

.some-example {
height: 100px;
width: 50%;
background-color: #101010;
}

@media (max-width: 992px) {
.some-example {
background-color: #FFF;
}
}

@media (max-width: 768px) {
.some-example {
width: 100%;
}
}

Complicated? No, it's easy. CSS is like any other language, is just read with the rules. Let's read that:

The class "some-example" is 100px height, 50% width and have a background #101010.

When the window have 992px width or less, the height is 100px, width is 50% and background color is #FFF.

When the window have 768px width or less, the height is 100px, width is 100% and background color is #FFF.

So, for affect all site, you only need to put code outside any Media Query. Please, if not you understood what I just write, read again and again, that's the base of Media Queries. Code outside the Media Queries will affect all sizes. Code in a Media Query will affect all the less width if is a max-width or will affect all the bigger width than the min-width defined.

3. Orientation

Some Examples:

@media screen and (orientation:landscape) { ...YOUR CODE... }

@media screen and (orientation:portrait) { ...YOUR CODE... }

You can define specific code for device orientation. Mobile normally works on the two orientations and is very useful to define some divs that only fit in one orientation.

4. Difference of HTML and CSS

Some Examples:

<link rel="stylesheet" media="screen and (max-device-height: 768px)" />

@media screen and (max-device-height: 768px) {}

There is no significant difference. The thing you need to retain is that when you use Media Queries on HTML, you will affect all the .css file linked. In css you will only affect the code inside the @media

5. Device Size

Some Examples:

<link rel="stylesheet" media="screen and (max-device-width: 1024px)" />

Some adaptive websites use that code to define the Media Query files to use and, naturally, is more used direct on html. I really don't like to use this, but I'm a responsive lover. Normally this code is used to hide mobile versions of computer resized windows. It's also used to offer apps to mobile users, for example. It works like the normal max/min-width, but based on screen size.

6. Multiple features

Some Examples:

@media screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : portrait) { ...YOUR CODE...}

@media screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) { ...YOUR CODE...}

Yes, your can use multiple features for same Media Query. For example, this code affects all code between a window size 375px and 667px in portrait position.

7. Media Types

Some Examples:

@media tv and (min-width: 700px) { ... }
@media screen and (min-width: 700px) { ... }
@media print and (min-width: 700px) { ... }
@media all and (min-width: 700px) { ... }

You can also define for what type of media you and to use Media Query. Mobile, tablet and computer are all "screen" type. Find more about at w3schools.

Tips for Media Queries use

1. You must plan very well your website. You should define a wireframe for each measure you want to use in Media Queries from your site.

2. Place just in Media Queries what you want to change. My method is to create the code for the site above 1900px at the css file root and then just put in the Media Queries the code that changes some div characteristic .You must be conscious that to put the same code in Media Query that is already at the root of the css file you will be only spending resources on loading the css because it is no more than a repeated code

3. It is not good to use min-width and max-width in the same site in different Media Queries. It is not a rule, but usually creates confusion in your code. But take some attention to what I wrote: "min-width and max-width in the same site". The same does not apply to the same Media Query where sometimes it's good to use the two delimitations to work together. I usually just use max-width along the CSS. The min-width I use only in the same Media Query that is already max-width for create to size delimitations, when that option is justified of course.

4. NEVER put a size Media Query inside other size Media Query. Believe me, I've seen do this and that's simply stupid. First, size Media Queries are about... SIZE! If you put a max-width of 900px, the max-width will always be 900px, inside other size Media Query or not. Second, if you put the size outside the range size of parent Media Query, your Media Query will simply not work. Third, if you need a max-width + min-width you can use both in same @media tag, so, why complicate?

Was that all about Media Queries?

Ahaha, no way! Media Queries are a world. That 7 tips are only the main things I think you must to know now to answer your code if you are a beginner. I hope you enjoy and I have given you have the help that you was searching. Please give me your opinion on my facebook or for my mail hi@joaopedrogomes.eu.

Did you like this article?

Show me some support with your like on my facebook page