Files

camperbot 0473dedf47 chore(i18n,curriculum): processed translations - new ukrainian (#44447 )

2021-12-10 11:14:24 +05:30

4.2 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b0367417b2b2512b08	Створення медіа-запиту	0	https://scrimba.com/p/pzrPu4/cqwKrtm	301139	create-a-media-query

--description--

Медіа-запити є новою технікою CSS3, яка змінює представлення вмісту на основі різних розмірів області перегляду. Область перегляду — це видима область користувача веб-сторінки і відрізняється в залежності від пристрою, який використовується для доступу до сайту.

Медіа-запити складаються з типу медіа, і якщо цей тип медіа відповідає типу пристрою, на якому відображається документ, застосовуються стилі. У медіа-запиту може бути стільки селекторів та стилів, скільки Ви забажаєте.

Ось приклад медіа-запиту, який повертає контент, якщо ширина пристрою менше або дорівнює 100px:

@media (max-width: 100px) { /* CSS Rules */ }

а наступний медіа-запит повертає контент, якщо висота пристрою більше або дорівнює 350px:

@media (min-height: 350px) { /* CSS Rules */ }

Пам'ятайте, що CSS всередині медіа-запиту застосовується тільки в тому випадку, якщо тип медіа відповідає типу пристрою, який використовується.

--instructions--

Додайте медіа-запит таким чином, щоб тег p мав font-size 10px, якщо висота пристрою менша або ж дорівнює 800px.

--hints--

Ви повинні створити запит @media для пристроїв з height меншим або рівним 800px.

const media = new __helpers.CSSHelp(document).getCSSRules('media');
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));

Величина font-size вашого елементу p повинна становити 10px, якщо height приладу менше або ж дорівнює 800px.

const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");

У елемента p повинен бути заданий початковий font-size в 20px, якщо height пристрою перевищує 800px.

const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
assert(ifPFirst?.style?.fontSize === '20px');

--seed--

--seed-contents--

<style>
  p {
    font-size: 20px;
  }

  /* Only change code below this line */

  /* Only change code above this line */
</style>

<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>
  p {
    font-size: 20px;
  }

  @media (max-height: 800px) {
    p {
      font-size: 10px;
    }
  }
</style>

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

4.2 KiB Raw Permalink Blame History Unescape Escape