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.

-------------Problems Reply------------

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.

Category:javascript Views:3 Time:2018-06-10

Related post

  • How can I scale the content of an iframe? 2008-10-03

    How can I scale the content of an iframe (in my example it is an HTML page, and is not a popup) in a page of my web site? For example, I want to display the content that appears in the iframe at 80% of the original size. --------------Solutions------

  • How can I scale a div to 100% height and width inside of another element 2009-02-21

    How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML: <body style="height:100%;"> <table width="600px" height

  • How can I scale down an array of raw rgb data on a 16 bit display 2009-04-10

    I have an array of raw rgb data on a 16 bit display with dimension of 320 * 480. The size of the array is 320*480*4 = 6144000. I would like to know how can I scale this down (80 * 120) without losing image quality? I found this link about scaling ima

  • How can I scale an image in a CSS sprite 2010-03-12

    In this article, http://css-tricks.com/css-sprites/, it talks about how can I crop off a smaller image from 1 bigger image. Can you please tell me if it is possible/how I can crop off a smaller image and then scale the cropped off region before I lay

  • How can I execute XPath queries on DOMElements using PHP? 2011-05-08

    I'm trying to do Xpath queries on DOMElements but it doesn't seem to work. Here is the code <html> <div class="test aaa"> <div></div> <div class="link">contains a link</div> <div></div> </div>

  • How can I scale my font with different types of screen? 2011-11-12

    I have made an Android application, but it must work on different types of screen, and I have done that too. But it is 1 thing - for creating scaling screen I use layout_weight and dp instead px. But how can I scale my fonts in .xml files? Thank you.

  • How can I scale the background of a button? 2011-11-22

    I have the following button: <Button android:id="@+id/buttonok" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/back_no_save" android:text="OK" /> Its appearence is: How can I scale down

  • How can I scale/stretch/skew a sprite from a sprite sheet with javascript? 2011-12-09

    Some background: I am making a raycaster, well... was making. But I decided to change it up a bit. I started off going on creating the ray caster and decided it would be so much easier to just display an icon and stretch/skew it instead of just movin

  • How can I reset Media Center Library of monitored Folders and Files 2013-01-01

    Original title:Media Center for Vista I had set up Folders to be monitored but later changed my mind. I set to stop monitoring the folders I didn't want but the Folders and Files are still in the Library. How can I reset Media Center Library of monit

  • How can I change Media Center settings for dvd burning quality from best to good? 2013-07-06

    original title: How can I change Media Center settings for dvd burning quality from best to good? I don't have dvd room for HD and want to burn HD in SD. I burn TV shows in Media Center. The recording are HD. I do not have room on my burnable dvds fo

  • can i purchase windows 8 now till jan 31 and install,activiate after some months......if yes how can i get media center key? 2014-04-17

    can i purchase windows 8 now till jan 31 and install,activiate after some months......if yes how can i get media center key? --------------Solutions------------- dont try using the add features websites they are currently not working goto google sear

  • How I can integrate my media queries with java script for supporting @media Queries in IE? 2011-09-28

    I wrote these media queries for re-size my browser window @media screen and (min-width:768px) and (max-width:1023px) { #wrapper { width:621px; padding-left: 50px; margin:0 auto; background:red; } } @media screen and (min-width:1024px) and (max-width:

  • How to define multiple media queries in one stylus file? 2012-02-29

    How do I define multiple media queries in one file? I have this .styl-file: @media (min-width: 980px) body padding-top 60px @media (min-width: 768px) body .container width 768px This is giving me the error expected "indent", got "newline". Placing th

  • How can I make two queries in one? 2009-04-21

    How can I make this two queries in one ? $query = "SELECT * FROM `amb_prod` WHERE idAmbiente='".$ambId."';"; $result_set = mysql_query($query); while($member = mysql_fetch_array($result_set)){ $query2 = "SELECT * FROM `produto`, `pt` WHERE produto.re

  • How can I join two queries? 2009-05-14

    How can i join these two queries (Query1-Query2) Query1: declare @date1 datetime,@date2 datetime , @COUNT INT , @countgap int seLECT @date1='2009-05-11' , @date2 = '2009-05-12' seLECT @countgap = 30 , @COUNT = 0 select @date1 TARIH , @COUNT SIRA INTO

  • How can I scale an entire web page with CSS? 2009-07-20

    Using Firefox, you can enlarge an entire web page by simply pressing CTRL +. What this does is proportionally enlarge the entire web page (fonts, images, etc). How can I replicate the same functionality using simply CSS? Is there something like page-

  • How can I put two queries in one mysql_query? 2010-01-01

    I'm trying to do something like this: mysql_query(" UPDATE name SET money = money + 1; UPDATE surname SET money = money + 1; "); but it doesn't work. It's just example, but my question is: How can I put two or even more queries in one mysql_query? --

  • Android::how can I scale a web View? 2010-11-02

    how can I set the scaling in a web view (or any view at all)? I have a box of 200 and 200, for example. If I apply a web view to it, a web view bigger than the box, it will give me scrollbars. I am seeking for a way to scale the content in order for

  • How can I perform complex queries (eg. over many-to-many relationship) in Entity Framework using a repository pattern? 2011-02-08

    I am using Entity Framework v4 and the repository pattern found in the answer to this SO question: Advantage of creating a generic repository vs. specific repository for each object? Namely, each repository inherits from an abstract base class that c

  • How can I scale socket.io? 2011-05-10

    Let's say a server gets 10,000 concurrent connections (via socket.io). That's a lot, and if it can't handle any more, I need to spin up another server. How can I sync the two servers together with their socket.io? --------------Solutions-------------

  • How can I scale this HTML using Javascript and JQuery 2011-05-18

    I have a website I am working on but there is a photo gallery I am currently working on with some issues. The problem is that there are about 30 pictures and I don't want to have 30 blocks of code inputting an image. I want to scale it so when I have

  • How slow are CSS media-queries? 2011-07-13

    When I organize my CSS, I like to keep related styles altogether (header styles are in one section, footer styles are all in the same place, etc.) (sorry, OOCSS advocates). I've recently been experimenting with media queries for smaller/larger screen

  • How to detect if Media Queries are present using Modernizr 2011-09-18

    I'm trying to detect whether media queries are present using Modernizr 2, then loading in respond.js if appropriate. I've put this in my script.js file... Modernizr.load({ test: Modernizr.mq, yep : '', nope: 'mylibs/respond.js' }); What am I doing wr

  • How can I scale element height and width using CSS? 2011-11-06

    Is there a way using CSS to scale elements. For example, if I have an image, how can I say img.height = image.height * 0.75 // scale down to 0.75 using CSS? --------------Solutions------------- Try this: div.zoomed { zoom: 0.75; -moz-transform: scale

  • How can I scale a Silverlight application to 50% width/height? 2011-11-18

    I created a simple 2D game in XNA for Windows and Xbox. I'm in the process of porting this game to Silverlight 5 (at the time of this writing, still in RC), which supports SpriteBatch, Texture2D, and all sorts of other XNA goodies that I'm using in m

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.114 (s). 11 q(s)