StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>OK - for starters, you should use Ems for as many measurements as you can in your UI. At the very least, size all of your text elements with Ems (rather than pixels or %'s). If possible, setting the width of layout blocks in Ems will help the app scale in proportion, too. If you can set all your dimensions in Ems, your entire app will be visually scalable.</p> <p>The key to Ems is that they're sized relative to the font size of their parent element - which means you can adjust the size of all the text in proportion, by adjusting the font-size of the body element (since everything is relative to the body).</p> <p>The last step is to use a piece of javascript to detect the width of the viewport, and set the font-size of the body accordingly. Depending on how fine-grained you want to control the scale, you can either use classes on the body element to set up a set of pre-defined values, or directly manipulate the font-size itself. I'd tend to use pre-determined sizes if possible to make testing easier.</p> <p>I'd use a javascript library to make the detection of the viewport width easier - it's notoriously different in different browsers. With jQuery, the code could look like:</p> <pre><code>$(function(){ var viewPortWidth = $(window).width(); if (viewPortWidth > 1900) {$('body').addClass('extraWide')} else if (viewPortWidth > 1400) {$('body').addClass('wide')} else if (viewPortWidth > 1000) {$('body').addClass('standard')} else if (viewPortWidth > 700) {$('body').addClass('narrow')} else {$('body').addClass('extraNarrow')} }); </code></pre> <p>And the CSS:</p> <pre><code><style type="text/css"> body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */ body.extraWide {font-size:85%;} body.wide {font-size:75%;} body.narrow {font-size:50%;} body.extraNarrow {font-size:40%;} </style> </code></pre> <p>Those values can be tweaked however you like, of course, and you can set up as many divisions as you want. This is very much a quick-and-dirty solution, but should do the trick.</p> <p><em>A note</em> - the javascript code shown will only set the scale once when the page is loaded - it won't adjust it when you change the size of your window. That's a possible addition, but there are bigger considerations before heading down that track. Personally, I'd even think about setting the scale value in a cookie, to keep the user's experience consistent throughout their session, rather than rescaling on every page load.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload