freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b0c	Make Typography Responsive	0		Сделать отзывчивость типографии

Description

Вместо использования текста em или px для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана:

vw: 10vw будет составлять 10% от ширины vw: 10vw просмотра.
vh: 3vh будет 3% высоты просмотра.
vmin: 70vmin будет на 70% меньше размера vmin: 70vmin просмотра (высота и ширина).
vmax: 100vmax будет на 100% больше размера vmax: 100vmax просмотра (высота и ширина).

Instructions

Установите width тега h2 на 80% ширины окна просмотра и width абзаца как на 75% меньшего размера окна просмотра.

Tests

tests:
  - text: Ваш тег <code>h2</code> должен иметь <code>width</code> 80vw.
    testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
  - text: Ваш тег <code>p</code> должен иметь <code>width</code> 75vmin.
    testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'

Challenge Seed

<style>

</style>

<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

Solution

// solution required

3.0 KiB Raw Blame History Unescape Escape