78 lines
3.6 KiB
Markdown
78 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
id: 587d78b1367417b2b2512b0c
|
|||
|
|
title: Створення адаптивної типографії
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
|||
|
|
forumTopicId: 301141
|
|||
|
|
dashedName: make-typography-responsive
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Замість `em` чи `px` для визначення розмірів тексту, можна скористатися одиницями області перегляду для адаптивної типографії. Одиниці області перегляду, наприклад, відсотки - це відносні одиниці, але вони базуються на різних елементах. Одиниці області перегляду відносяться до розмірів області перегляду (ширини або висоти) пристрою, а відсотки - до розміру елемента батьківського контейнера.
|
|||
|
|
|
|||
|
|
Чотири різних одиниць області перегляду:
|
|||
|
|
|
|||
|
|
<ul><li><code>vw</code> (ширина перегляду): <code>10vw</code> складатиме 10% від ширини області перегляду.</li><li><code>vh</code> (висота перегляду): <code>3vh</code> складатиме 3% від висоти області перегляду.</li><li><code>vmin</code> (мінімальний перегляд): <code>70vmin</code> складатиме 70% від найменшого розміру області перегляду (висоти чи ширини).</li><li><code>vmax</code> (максимальний перегляд): <code>100vmax</code> складатиме 100% від найбільшого розміру області перегляду (висоти чи ширини).</li></ul>
|
|||
|
|
|
|||
|
|
Ось приклад, який встановлює тег `body` на 30% від ширини області перегляду.
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
body { width: 30vw; }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Встановіть `width` тегу `h2` на 80% від ширини області перегляду, а `width` абзацу - на 75% від найменшого розміру області перегляду.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш тег `h2` повинен містити `width` 80vw.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
__helpers
|
|||
|
|
.removeCssComments(code)
|
|||
|
|
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш тег `p` повинен містити `width` 75vmin.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
__helpers
|
|||
|
|
.removeCssComments(code)
|
|||
|
|
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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>
|
|||
|
|
```
|