2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b1367417b2b2512b0c	Rendere i caratteri responsivi	0	https://scrimba.com/p/pzrPu4/crzN7T8	301141	make-typography-responsive

--description--

Invece di utilizzare em o px per dimensionare il testo, è possibile utilizzare le unità di visualizzazione responsive per i caratteri. Le unità viewport, come le percentuali, sono unità relative, ma sono basate su elementi diversi. Le unità viewport sono relative alle dimensioni (larghezza o altezza) di un dispositivo, e le percentuali sono relative alla dimensione dell'elemento contenitore genitore.

Le quattro diverse unità viewport sono:

vw (larghezza della viewport): 10vw sarebbe il 10% della larghezza della viewport.
vh (altezza della viewport): 3vh sarebbe il 3% dell'altezza della viewport.
vmin (minimo): 70vmin sarebbe il 70% della dimensione più piccola della viewport (altezza o larghezza).
vmax (viewport maximum): 100vmax sarebbe 100% della dimensione maggiore della viewport (altezza o larghezza).

Ecco un esempio che imposta un tag body al 30% della larghezza della viewport.

body { width: 30vw; }

--instructions--

Imposta la width del tag h2 all'80% della larghezza della viewport e la width del paragrafo come 75% della dimensione più piccola della viewport.

--hints--

Il tuo tag h2 dovrebbe avere una width di 80vw.

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

Il tuo tag p dovrebbe avere una width di 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>

2.9 KiB Raw Blame History