StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <code>font-size</code> won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press <kbd>ctrl</kbd> and <kbd>+</kbd> together on the keyboard while in the browser.</p> <p><strong>Media Queries</strong></p> <p>You would have to look at using <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="noreferrer">media queries</a> to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.</p> <p>For example, try adding this inside your CSS at the bottom, changing the 320px width for wherever your design starts breaking:</p> <pre><code>@media only screen and (max-width: 320px) { body { font-size: 2em; } } </code></pre> <p><strong>Viewport percentage lengths</strong></p> <p>You can also use <a href="https://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="noreferrer">viewport percentage lengths</a> such as <code>vw</code>, <code>vh</code>, <code>vmin</code> and <code>vmax</code>. The official W3C document for this states:</p> <blockquote> <p>The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.</p> </blockquote> <p>Again, from the same W3C document each individual unit can be defined as below:</p> <blockquote> <p>vw unit - Equal to 1% of the width of the initial containing block.</p> <p>vh unit - Equal to 1% of the height of the initial containing block. </p> <p>vmin unit - Equal to the smaller of vw or vh. </p> <p>vmax unit - Equal to the larger of vw or vh. </p> </blockquote> <p>And they are used in exactly the same way as any other CSS value:</p> <pre><code>.text { font-size: 3vw; } .other-text { font-size: 5vh; } </code></pre> <p>Compatibility is relatively good as can be seen <a href="https://caniuse.com/#search=vw" rel="noreferrer">here</a>. However, some versions of IE and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.</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