Which is the best/correct way to use media-queries out of these two examples?

HTML & CSS
1

which of these is the best practice to use when developing? In the examples I change font-size depending on screen size. In the first one I just overwrite previous CSS depending on screen size and in the second one I just have the common styles outside media-queris and then set the screen dependent styles inside queries for those sizes.

div{
color: #000;
font-size: 40px;
}

@media screen and (max-width: 767px) {

div{
font-size: 30px;
}

}

@media screen and (max-width: 320px) {

div{
font-size: 20px;
}

}



div{
color: #000;
}

@media screen and (max-width: 320px) {

div{
font-size: 20px;
}

}

@media screen and (min-width: 321px) and (max-width: 767px) {

div{
font-size: 30px;
}

}

@media screen and (min-width: 767px) {

div{
font-size: 40px;
}

}
2

Hi,

There is no real right or wrong but it all depends on the approach you want to take :slight_smile:

In your second example browsers that don’t understand media queries (ie8 and under) will get no font-size for those elements so that is a bad choice. Also there is no need for “and (max-width: 767px)” because you are overwriting the rule in the next media query anyway (just as you did with the first version).

In both cases its better to start with pages that work without media queries present and then enhance them with media queries by over-writing rules.

If you go '‘mobile first’ then the default layout is the mobile version and then you enhance it via media queries for larger devices. This means using min-width media queries to create larger versions of the site as required. The downside is that IE8 and under get the mobile view as they don’t understand media queries.

The other option is to go desktop first and then design the standard layout for desktop and them use media queries to cater for smaller devices. This means IE8 and under get the desktop version ok. It is also slightly easier to code sizes from large to small than from small to large but maybe that’s just me :slight_smile: Previously ‘mobile first’ was the mantra because mobile support for media queries was far from perfect but these days it’s not really an issue.

I tend to build fluid sites anyway so that they automatically fit on most devices and then just tidy things up with media queries where the design needs to change and forget about device widths completely. You need to free yourself from the constrains of devices and just create layouts that fit anything.

3

Okey thanks for the reply, cleared up a few things=)

I usually go for the first approach, and then using max-width queries when needed. Sounds like that is the best way to approach it then?

4

Yes that’s my preference also but a lot of people do it the other way :slight_smile:

5

I recently coded a page that considers the “middle” width the norm. Uses @media {min-width} to describe changes needed for the wider (desktop) view and @media {max-width} for the mobile view… Go figure :scratch: :lol: