Dan Dan - 2 months ago 20
Javascript Question

Loking for media queries generator

I want my page to scale awesome to fit all possible screens on all devices, so I've used an idea to change

size of the root element. All child elements have sizes in

Resizing of the page and zooming should also be supported well.

I'm currently having 200 lines of such a funny css code:

@media (max-width: 400px) {
#vb { font-size: .8px}
@media (max-width: 350px) {
#vb { font-size: .7px}
@media (max-width: 320px) {
#vb { font-size: .64px}

I would like to ask for a pretty library that would generate this code automatically.

I am sure that this huge css code should be generated on frontend, because those 200 - 1000 lines consume kilobytes.

PS: What about correctness of my approach?

The solutions could be:

  • what if I calculete the page size by JavaScript and put just two lines of code like:

    var fontSize = calculateFS();
    $('#vb').style({sizeSize: fontSize});

This code works good if we are not going to resize the window or zoom in-out. But if I'm going to catch events onzoom or onresize, there are serious lags in interface.

  • any other ideas form the community?

Thank you for attention


Why not consider responsive typography using rems?

This article explains this in much more detail. A short excerpt:

@media (max-width: 640px) { body {font-size:1.2rem;} }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width: 960px) { body {font-size:1.2rem;} }
@media (min-width: 1100px){ body {font-size:1.5rem;} }

This would seem like a far better option than using ems or pixels, because rems are relative to the body element, not the parent element.

I might have misinterpreted this, but it doesn't really seem like you need to use so many media queries, or even any JS at all.

If you just want to keep media queries maintainable, perhaps consider using Compass and Sass? http://css-tricks.com/media-queries-sass-3-2-and-codekit/