5

I am using bootstrap and have a responsive page width-wise, but am also trying to make it vertically responsive. This page will ultimately end up as a sort of widget, so that the user can resize it into any sort of width and height combination. Generally what I've seen researching online have been responsive-width related, or if they talk about height media queries it is only for a portion of all the elements that constitute the page.

I find that having breakpoints in bootstrap helps, but almost wish there was a 12-row grid system as well for vertical breakpoints. Not all layouts will look good when constrained for height, especially when what I am trying to do won't have any vertical scrollbars either.

It also feels redundant to target height media queries in conjunction with certain widths when I already have (min-width & max-width) media queries. Because if I just made (min-height & max-height) media queries then it would crop content that was too wide.

Starting from a 16:9 aspect ratio and 1920x1080px resolution, I have broken it up into 12 breakpoints. 3, 6, 9 ratio heights and 4, 8, 12, 16 ratio widths.

@media (min-width: 480px) and (min-height: 360px){}
@media (min-width: 480px) and (min-height: 720px){}
@media (min-width: 480px) and (min-height: 1080px){}
@media (min-width: 960px) and (min-height: 360px){}
@media (min-width: 960px) and (min-height: 720px){}
@media (min-width: 960px) and (min-height: 1080px){}
@media (min-width: 1440px) and (min-height: 360px){}
@media (min-width: 1440px) and (min-height: 720px){}
@media (min-width: 1440px) and (min-height: 1080px){}
@media (min-width: 1920px) and (min-height: 360px){}
@media (min-width: 1920px) and (min-height: 720px){}
@media (min-width: 1920px) and (min-height: 1080px){}

Basically I'm asking if there is a better or easier way of doing this. Because currently it seems like I'm having to use a lot of custom breakpoints, and that I'll be inserting a lot of styles in each query to adjust the layouts for each screen size.

Akin Hwan
  • 607
  • 1
  • 9
  • 26
  • Are you looking for a way to make the height of your elements flexible? – natejms May 04 '17 at 15:17
  • Try flex based css framework like Material or bootstrap 4 – Vivek Vikranth May 04 '17 at 15:19
  • @natejms yes I am looking to make the entire page layout not only scale according to viewport height, but also break and rearrange in layout according to the new screen restrictions just as columns have breakpoints in bootstrap – Akin Hwan May 04 '17 at 16:22
  • @VivekVikranth I am already using bootstrap 3, but the problem here is I can't get the same sort of breakpoints going vertically, example there is no row-sm-1 – Akin Hwan May 04 '17 at 16:23

2 Answers2

6

Scaling according to the viewport height.

So to answer the first part of your question, CSS3 offers the units vw (view width) and vh (view height). The VW and VH units measure the width and height of the viewport. For an example, 30vh is the equivalent of 30 percent of the height of the viewport. There's also vmin and vmax, where vmin is equal to the smaller and vmax is equal to the larger of the two.

For an example, if you wanted to make a div element fill up the entire viewport,

div {
  width: 100vw;
  height: 100vh;
}

In the past, people would have used height: 30% to make an element take up thirty percent of the height of the viewport, but the problem is that using height: 30% would only make the element take up thirty percent of its parent element. For this reason, it isn't as effective.

Simplifying the @media queries.

If you really need twelve break points in your web page to ensure it looks as it should on all devices, I'd argue that you're doing something wrong. The whole point of responsive web design is to avoid having to style your web page differently for each screen resolution and aspect ratio. Hopefully, using things like the vw and vh units will help you avoid needing to create that many separate layouts. To my knowledge, there really isn't a way to simplify those @media queries (correct me if I'm wrong).

natejms
  • 699
  • 4
  • 7
  • Thanks for the response! Ok granted I may have too many breakpoints. However how would you recommend changing my current units of measure if I want them to be responsive to both height and width? If my example wasn't just setting viewport units for convenient properties such as width and height. But rather if it were font-size or padding, what then? A font-size: 24vw wouldn't resize even if the browser were 10 pixels tall. In other words I wish I could assign both vw and vh values to certain properties. Any thoughts here? – Akin Hwan May 08 '17 at 21:15
  • 1
    @AkinHwan From what you're describing, I think you're looking for the vmin and vmax units. I didn't talk about them too much in my answer, but I'd try looking into those. – natejms May 09 '17 at 22:45
2

You can also set @media queries for height:

@media screen and ( max-height: 600px ){
    background: blue;
}

see this question for reference.

Community
  • 1
  • 1
Carlos Valencia
  • 6,499
  • 2
  • 29
  • 44