CODEWITHSUNDEEP
javascripthtmlcssember.js
Coolheinze
Coolheinze

Reputation: 21

How can I scale media queries?

Ahoy...

I'm doing an Ember application, and I need to be able to scale the layout, as it sometimes needs to be displayed on large panels, where I can't get the pixel ratio. (oh, and all the way down to iPhone screens as well...)

So, here's my problem: I've made the whole thing totally scalable and dandy, but I do also need to use a bunch of media queries here and there.

Now, while I can scale the application (fonts etc.) up and down with my JS skillz, the general layout remains the same, as the media queries are unchanged. This obviously makes everything look somewhat distorted.

What I need is basically to be able to apply a scaling factor to the limits in my media queries.

I realise that a workaround would be to change the meta tag for the screen width, but that's a no-go, as we need device pixel = actual pixel for the cleanest rendering (many Androids look fuzzy with pixel ratio e.g. 1.75).

I've looked at using calc(..) in the media queries (doesn't work). As I'm using Ember, I have access to all the templates and stuff. I'm thinking along the lines of calculating it all in JS and shoving it into the DOM in a STYLE tag, but with ~100 media queries, I imagine it will get painful... And keep me from lager in the weekend... So here's me drafting... No pun intended...

EDIT:

Seems I haven't stressed a key issue enough: The MQs need to be changeable client-side. As mentioned, the application needs to run on wall-mount TV screens of arbitrary size, so while they probably all have HD or HD-ready resolution, the PPI varies a lot, and the only way to obtain the appropriate scale of the design, is to fire the thing up and scale it to fit in the app config. Just going with plain ol' MQs won't cut it.

Upvotes: 1

Views: 311

Answers (1)

gabe3886
gabe3886

Reputation: 4265

Following the positive feedback from my comment, I've created this as an answer to help people viewing this question down the line.

When creating an application or website which needs to scale from small devices up to large screens, it is always best to use easily scalable units of measurement. This means avoiding the use of px in your CSS.

The following units should be used for the best cross-device compatibility and scalability:

%. The percentage of the screen to measure. e.g. 100% is 100% of the screen, 50% is half of the screen, and so on. Fairly straight forward.

rem. The size relative to the root element em size. This means that whatever the base font size is for the document, everything scales in relation to that. If the base font size is 16px and you set something to be 1.5rem, then it will be 24px; 1.5 x 16px. This is ideal when adding accessibility and allowing users to increase the font size themselves.

em (where things can get complicated). This is the size relative to the direct parent container font size. It's similar to rem (see above), but will multiply the further down the structure you go.

Assume the following css:

html {
    font-size : 16px;
}

div {
    font-size : 1.5em;
}

When we couple this with nested divs, things can get frustrating:

<div>
    <!-- font-size is 24px !-->
    <div>
        <!-- font-size is 36px !-->
        <div>
            <!-- font-size is 54px !-->
        </div>
    </div>
</div>

Use em's carefully as you can find things scaling very rapidly when you didn't expect it.

Upvotes: 2

Related Questions