javascript - How can I scale media queries? -


ahoy...

i'm doing ember application, , need able scale layout, needs displayed on large panels, can't pixel ratio. (oh, and way down iphone screens well...)

so, here's problem: i've made whole thing totally scalable , dandy, do need use bunch of media queries here , there.

now, while can scale application (fonts etc.) , down js skillz, general layout remains same, media queries unchanged. makes distorted.

what need able apply scaling factor limits in media queries.

i realise workaround change meta tag screen width, that's no-go, need device pixel = actual pixel cleanest rendering (many androids fuzzy pixel ratio e.g. 1.75).

i've looked @ using calc(..) in media queries (doesn't work). i'm using ember, have access templates , stuff. i'm thinking along lines of calculating in js , shoving dom in style tag, ~100 media queries, imagine painful... , keep me lager in weekend... here's me drafting... no pun intended...

edit:

seems haven't stressed key issue enough: mqs need changeable client-side. mentioned, application needs run on wall-mount tv screens of arbitrary size, while have hd or hd-ready resolution, ppi varies lot, , way obtain appropriate scale of design, fire thing , scale fit in app config. going plain ol' mqs won't cut it.

following positive feedback comment, i've created answer people viewing question down line.

when creating application or website needs scale small devices large screens, best use scalable units of measurement. means avoiding use of px in css.

the following units should used best cross-device compatibility , scalability:

%. percentage of screen measure. e.g. 100% 100% of screen, 50% half of screen, , on. straight forward.

rem. size relative root element em size. means whatever base font size document, scales in relation that. if base font size 16px , set 1.5rem, 24px; 1.5 x 16px. ideal when adding accessibility , allowing users increase font size themselves.

em (where things can complicated). size relative direct parent container font size. it's similar rem (see above), multiply further down structure go.

assume following css:

html {     font-size : 16px; }  div {     font-size : 1.5em; }

when couple nested divs, things can frustrating:

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

use em's can find things scaling rapidly when didn't expect it.


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more