1

I just don't see anyone talking about this exact issue out there. Looking to have site fit any screen exactly with no scroll. Certain elements being fixed ratio (logo, video players, etc) means other areas have to expand/contract amorphically to accomodate their fixed behavior that can't ever go past 100% width or height. Difficult to explain, but the behavior in sassmeister gist below shows it working. To do this, I need to be able to define widths in terms of heights, and vice-versa (width = 56.25% of height, etc)

I can make it work using vh, vw, vmin, a bunch of calc functions etc... but browser support is patchy, and I'm unaware of a polyfill to smooth all that out. My vh, vw, calc solution below:

http://sassmeister.com/gist/3dee56a4092a86cf070a

Only other pure css I'm aware of that even begins to address this is the percent padding trick tying padded height to parent width, but this alone isn't enough. I need to be able to use min, max statements, and tie width and height going both ways.

So... unless I'm mistaken, @media queries only ever return true/false, so they can't provide an actual viewport measurement to use, right? That's what I really need... a pixel accurate measurement of the available viewport height and width.

What's the solution here? Should I use javascript to get those exact dimensions, then do all the arranging in javascript? Use JS to get the variables, then pass them on to the css?

Something like this: https://gist.github.com/scottjehl/2051999 and a method to import those returned values into css should work, no? Is that slowing the site down too much to have the js call first before anything else happens?

Also, need to find the right way to do all these calculations. Should I just be using javascript to do all the calcs and leaving stuff like the following out of css completely?

$gutter: calc(((100vh + 100vw) / 2) * 0.04)

Then using that variable inside another function:

$column-width: calc(100vw - (1.7778 * (100vh - 2 * $gutter)) - 3 * $gutter)

You get the idea. I think I'm nearing the end of what I can do with the css. JS solution? Hybrid? Something else?

thx.

gregorio
  • 43
  • 7

1 Answers1

1

It sounds like media queries are what you're looking for.

You can use the following to target screens with a max width of 1200 px and a min width of 800:

@media all and (max-width: 1200px) and (min-width: 800px) {
    //some css here
}

Check out the way bootstrap-sass implements containers here.

Also check out the other SO answer about media queries.

You can even specify landscape and portrait layouts.

@media (orientation:portrait) { ... }

Or aspect ratio:

@media screen and (device-aspect-ratio: 16/9) { ... }

I hope this helps. You can use some of those fancy gutter calculations inside of/with media queries and that should simplify things a bit.

This javascript will return the screen height:

var x = "Total Height: " + screen.height;
document.getElementById("demo").innerHTML=x;

Width:

var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;

Some JQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document
Community
  • 1
  • 1
Chase
  • 2,748
  • 2
  • 23
  • 32
  • I haven't seen anything in frameworks to define height as function of width and vice-versa. Yes, I will need one query to determine landscape vs portrait, but within each of those separate layouts, it's all about aspect ratios. I can solve with vh and vm... but the browser support is patchy, and I haven't found a good polyfill. How do I get either exact viewport dimensions or exact aspect ratio to plug into SCSS? If that can't be done, what JS should I be looking into that will give me exact dimensions to work with and let me define widths as functions of heights and vice-versa? – gregorio May 13 '14 at 06:21
  • Something like: var x = "Total Height: " + screen.height; document.getElementById("demo").innerHTML=x; See the [W3School](http://www.w3schools.com/jsref/prop_screen_height.asp) – Chase May 13 '14 at 13:02
  • That looks like a step in the direction I'm intending. Should I be passing that JS variable into CSS somehow? I'm new to this, but seems lots of folks discourage using js for the basic layout. Also... I've got most of it working using the vh, vw units and calc in css. Would it be preferable if possible to skip the js up-front, and figure out how to polyfill for unsupported browsers after supplying a rough outline of the layout in older css? Vids + img already cause load time issues. Not sure if js adds to that. Most of target demo should have js enabled since social sharing content. – gregorio May 13 '14 at 14:51
  • Also, in general, it's a music video site geared toward getting people to like on FB, etc... so mostly younger crowd, lots of mobile users, nearly all with js enabled, etc. Just tossing that out there to put perspective on right approach for this particular project. They can't really share properly with js disabled anyway. As for browsers, that may be more of a mixed bag, but I'm not concerned about government employees on 15 year old pc's or anything like that. I can afford to be fairly modern, though obviously prefer to break gracefully. I would at least like ipad 1 users to be supported. – gregorio May 13 '14 at 15:09
  • Which browsers are you trying to support? Like ie 8 or 9? Yeah, generally layout should be accomplished with css, but its ok to use js when you need to. See this article by [google](https://developers.google.com/webmasters/smartphone-sites/javascript) As for passing a js variable to your css, you can do it at run time inlined: .myClass { width: myVar } there are other ways, but I'm no js expert. – Chase May 13 '14 at 17:54