Recommended Media Query habit?

HTML & CSS
1

Greetings,

my current practice of Media Query is like this:

/*iPhone 6 Plus*/
@media (max-width: 414px) and (max-height: 736px) {
    .title {font-size: 35px !important;}
    .title-res {font-size: 35px !important; padding-top: 5px;}
    .navbar {opacity: 0.9;}
}

Is this a correct way of doing it?
or should I use the “min-width and min-height” too?

Another problem…

My media query starts from the bottom, it doesn’t read from the top. So my query starts from biggest screens to smallest, is this legit?

Thank you.

2

I would forget using max-height or min-height. It’s the width that matters.

max-width is the way to go for desktop-first designs. If you’re doing mobile-first, you’ll want to use min-width. Neither is right or wrong, just different ways of peeling the orange.

2 Likes
3

I’m certainly not an expert in this, but I have never seen a case where any type of “height” was needed in a media query.

I believe the current best practice is to start with “desktop first” or “mobile first” approach and add the media query rules at widths where the design “breaks”.

That is, design so it looks good in one (I prefer desktop as that is what my history has been) and then narrow (or widen) until the design goes foo bar.

Then add the media queries at or just before those widths.

In my limited experience this has worked for me.

EDIT
ninja’d by gandalf458 :smile_cat:

1 Like
4

IMO, no.
The first problem:-

/*iPhone 6 Plus*/

Forget about targeting specific devices, there are far too many of them. The best approach is to be device agnostic. Place your queries at a width where your design needs to change the layout to look its best.

For the most part you should not need to include height in your queries. By using both width and height you are narrowing the scope of the query too much.
There may be some edge cases where you want a height query, but this is rare, concern yourself only with width, unless you find a special case where height is required.

Desktop first Vs Mobile first?
There are debates about this, but IMO, it doesn’t really matter too much. Use which ever way you prefer.

Using px for font-size is not good practice, use em or rem instead.
I’m curious why you need !important there too, do you need that?

2 Likes
5

OMG I missed seeing that.
Agreed 100+% - forget about styling for devices.
Style for viewport widths and you’ll be good to go.

6

Ditto

7

I see, okay understood the height part.

About the width: “use min-width”

so, when I slowly increase my browser’s width, by the time I see the website isn’t well I add that min-width??

Example:

Increased my screen’s width, and it looks bad at 600px, I add min-width: 600px.

right??

8

Yes, that’s how it would work with a “mobile first” approach.
Though it’s a little different working that way, as the layout may not “break” as such when it gets bigger, but it will be able to accommodate a change in layout.
I find it easier to identify “break points” in desktop first, because going smaller, you clearly see the point at which your layout no longer fits and needs a change. That isn’t to say you must do it that way.

2 Likes
9

I’ve had to do it before; I had a full page slider that defaulted at 640px. So on screens less than 640, I didn’t make it full screen, and defaulted it to 640px (and non-scroll-jacked) and on larger screens, I let it scroll-jack and full screen.

4 Likes
10

+1.
A fixed navigation, vertical list on one side.
If the screen is not high enough for the nav to fit, it becomes the hamburger.
But still, it is very rare.

4 Likes
11

Max and min height media queries really only come in handy when you have a design that is made to be full screen or at least incorporate the browser window height in some way, typically with a position:fixed element somewhere that takes up the full screen height.

A lot of the time you can avoid having to use height based media queries though by using max-height values in the css with overflow set to auto.

Height based media query use cases are very rare and only occur in designs that only a more advanced front ender would be building. As a general rule, you can pretty much forget about height based media queries.

Also, I’d recommend taking a destop first approach (using max-width for the majority of your media queries) since you are only just learning and it is easier to build for desktop first then adapt it to mobile than it is to build mobile first and adapt it to desktop.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.