0

I have a question in regards to responsiveness design when it comes to heights, when developing for responsive design, is it better to use

@media (max-height: 2160px)

or

@media (min-height: 2160px)

I have a bunch of rules based on min-height in a css file, and I am thinking that using min-height is going to cause me issues, especially since I am using a 4kuhd tv as a monitor at the moment, and working downwards. I am also using jquery to set heights and widths as well, so everything is running into each other and somethings I have to leave in jquery's hands to set heights and widths

EDIT

@media (min-height: 768px) {
    #Container {
        width: calc(100% - 20px);
        height: 96vh;
        border: 1px solid black;
        background-color: red;
    }
}

@media (max-height: 1080px) {
    #Container {
        width: calc(100% - 20px);
        height: 96vh;
        border: 1px solid black;
        background-color: purple;
    }
}


@media (max-height: 2160px) {
    #Container {
        width: calc(100% - 20px);
        height: 96vh;
        border: 1px solid black;
        background-color: hotpink;
    }
}

When I leave my screen resolution at 3840x2160 then the background is hot pink, when I change the resolution down to 1920 x 1080, it still stays hot pink, if I drop it lower than 1920x1080 then it goes purple.

I don't understand why when I drop it down to 1920x1080 that it doesn't change to purple

EDIT 2

I think I figured out why this is not working, and please someone correct me if I wrong.. If I subtract 111 from those screensizes then everything works. But I have no idea why subtracting 111 from my screen resolution width works.

Chris
  • 2,953
  • 10
  • 48
  • 118
  • When you're developing for responsive design, you should [stop](https://medium.com/@julienetienne/pixels-are-dead-faa87cd8c8b9) using `px` as a unit of measurement. – Martin Mar 03 '20 at 18:48
  • @Martin, I don't know how let alone understand em – Chris Mar 03 '20 at 18:55
  • forget `em`, [`rem` is where it's at](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) – Martin Mar 03 '20 at 19:25
  • @Martin, can you take a look at my second edit and maybe tell me why its the way it is?.. I'm look at rem – Chris Mar 03 '20 at 19:26
  • I'm looking at your second edit; and trying to find a suitable link for you to read. Using `px` is a ***BAD IDEA*** because of pixel density and related things like `devicePixelRatio` you can't trust `px` = `px`; your HD TV may have a very high pixel density (3 or 4) . There's a lot of reading material on this topic and I am by no means an expert but I think this is a primary tenat as to your issues – Martin Mar 03 '20 at 19:30
  • `min-height`, `max-height`, `vh` all work with the height of the viewport, not your screen size. As for using px vs rem, I use px in my responsive designs without issue. You just have to realize the px is the logical pixel size, not necessary a physical pixel size. `em`/`rem` is better if you care about letting users change the font size and letting things scale based on that, which typically I don't. – Robert McKee Mar 03 '20 at 19:31
  • @RobertMcKee it's always hard to judge if people actually mean screen size as this term is used interchangably by many to mean viewport size. – Martin Mar 03 '20 at 19:33
  • Does [this help you](https://stackoverflow.com/questions/16541676/what-are-best-practices-for-detecting-pixel-ratio-density)? – Martin Mar 03 '20 at 19:34
  • 1
    @Martin yes, but the media queries for exactly 768px, 1080px, and 2160px are a pretty big indicator that he doesn't understand the difference, and that is what is biting him. Based on his second edit. – Robert McKee Mar 03 '20 at 19:37
  • @RobertMcKee, you are correct, I am not understanding the difference. I came to the conclusion about subtracting 111 from my screen resolution based on what I found on media breakpoints and seen a breakpoint about 1080 and it showed the breakpoint for that as 969, so I took 1080 subtracted the 969 and came out to 111. So I did somoe more number crunching with what I found and it always came down to a 111 difference between my actual screen resolution and the correct px height for the media query. Stuck on why this is, and it has to be this way and not just be able to use my actual screen res – Chris Mar 03 '20 at 19:49
  • I assume you are using a browser, and that browser has an interface. Tabs, Url bar, favorates bars, scroll bars, and probably a border of a few pixels... Add the heights of those up, and for you.. you get 111px. Add an additional favorates bar and it might become 130px or 140px (I don' t know how tall your favorates are). – Robert McKee Mar 03 '20 at 19:59
  • [Try this](https://whatismyviewport.com/) what does it tell you, Chris? – Martin Mar 03 '20 at 20:03
  • @RobertMcKee, yes, using a browser. So the 111 difference is not going to work across all types of screen resolutions based on what you said about the other heights. So how we actually take those other heights into account, so I would have the correct media query height to use? – Chris Mar 03 '20 at 20:04
  • @Martin, that tells me 1920x969 – Chris Mar 03 '20 at 20:04
  • Typically I trigger mostly off a device's width more so than a device's height. That's usually because it's normal to scroll up/down, but not so much left/right. So I may need to adjust a design to accommodate larger/smaller widths. And no, you can't count on 111. If you must adjust your design because of a height, then think of a range that design would be acceptable for. It's not likely exactly 2160px.. Maybe that design would work for all devices between 1500px and 3000px, a different design between 800px and 1500px, and a small design less than 800px. – Robert McKee Mar 03 '20 at 20:05
  • @RobertMcKee, I think I am using jquery for the widths. I am working on a web application where the main area where there is a left panel, a center panel, and a left panel, and in the left and right panels I have other panels, so thats why I am hung up on media query for heights ,because going from 1920x1080 to 3840x2160 resolution will leave a lot of unused white space, so I need to make adjustments on heights because of that so everything looks right – Chris Mar 03 '20 at 20:11

0 Answers0