2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b1367417b2b2512b0c	Haz tipografía responsiva	0	https://scrimba.com/p/pzrPu4/crzN7T8	301141	make-typography-responsive

--description--

En lugar de usar em o px para dimensionar texto, puedes usar unidades de viewport para obtener una tipografía responsiva. Las unidades de viewport, como los porcentajes, son unidades relativas, pero se basan en objetos diferentes. Las unidades de viewport son relativas a las dimensiones del viewport (ancho o alto) de un dispositivo, y los porcentajes son relativos al tamaño del elemento contenedor padre.

Las cuatro diferentes unidades de viewport son:

vw (viewport width): 10vw sería el 10% del ancho del viewport.
vh (viewport height): 3vh sería el 3% del alto del viewport.
vmin (viewport mínimo): 70vmin sería el 70% de la dimensión más pequeña del viewport (altura o ancho).
vmax (viewport máximo): 100vmax sería el 100% de la dimensión más grande del viewport (altura o ancho).

Aquí hay un ejemplo que establece una etiqueta body al 30% del ancho del viewport.

body { width: 30vw; }

--instructions--

Establece el ancho width de la etiqueta h2 al 80% del ancho del viewport y el ancho width del párrafo como el 75% de la dimensión más pequeña del viewport.

--hints--

Tu etiqueta h2 debe tener un width de 80vw.

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

Tu etiqueta p debe tener un width de 75vmin.

assert(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.8 KiB Raw Blame History