3.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b1367417b2b2512b0c	Створення адаптивної типографії	0	https://scrimba.com/p/pzrPu4/crzN7T8	301141	make-typography-responsive

--description--

Замість em чи px для визначення розмірів тексту, можна скористатися одиницями області перегляду для адаптивної типографії. Одиниці області перегляду, наприклад, відсотки - це відносні одиниці, але вони базуються на різних елементах. Одиниці області перегляду відносяться до розмірів області перегляду (ширини або висоти) пристрою, а відсотки - до розміру елемента батьківського контейнера.

Чотири різних одиниць області перегляду:

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

Ось приклад, який встановлює тег body на 30% від ширини області перегляду.

body { width: 30vw; }

--instructions--

Встановіть width тегу h2 на 80% від ширини області перегляду, а width абзацу - на 75% від найменшого розміру області перегляду.

--hints--

Ваш тег h2 повинен містити width 80vw.

assert(
  __helpers
    .removeCssComments(code)
    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
);

Ваш тег p повинен містити width 75vmin.

assert(
  __helpers
    .removeCssComments(code)
    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
);

--seed--

--seed-contents--

<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>

--solutions--

<style>
  h2 {
      width: 80vw;
  }
  p {
      width: 75vmin;
  }
</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>

3.6 KiB Raw Blame History Unescape Escape