Improve viewport unit readability (#36673)

* Improve viewport unit readability

Ran into a readability issue when trying to complete challenge. Instead of using `width: 80vw` was attempting `vw: 80vw` based on the initial layout. I believe either this change or the example that was added but doesn't seem to be pushed yet will help.
This commit is contained in:
Tom
2019-11-11 03:24:02 -06:00
committed by Oliver Eyton-Williams
parent 67e0f33a89
commit 6ff5e52b2d

View File

@ -10,7 +10,7 @@ forumTopicId: 301141
<section id='description'>
Instead of using <code>em</code> or <code>px</code> to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.
The four different viewport units are:
<ul><li><code>vw: 10vw</code> would be 10% of the viewport's width.</li><li><code>vh: 3vh</code> would be 3% of the viewport's height.</li><li><code>vmin: 70vmin</code> would be 70% of the viewport's smaller dimension (height vs. width).</li><li><code>vmax: 100vmax</code> would be 100% of the viewport's bigger dimension (height vs. width).</li></ul>
<ul><li><code>vw</code> (viewport width): <code>10vw</code> would be 10% of the viewport's width.</li><li><code>vh</code> (viewport height): <code>3vh</code> would be 3% of the viewport's height.</li><li><code>vmin</code> (viewport minimum): <code>70vmin</code> would be 70% of the viewport's smaller dimension (height or width).</li><li><code>vmax</code> (viewport maximum): <code>100vmax</code> would be 100% of the viewport's bigger dimension (height or width).</li></ul>
Here is an example that sets a body tag to 30% of the viewport's width.
<code>body { width: 30vw; }</code>
</section>