freeCodeCamp

2.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b0c	Make Typography Responsive	0		Hacer que la tipografía responda

Description

En lugar de usar em o px para px tamaño del texto, puede usar unidades de vista para tipografía sensible. Las unidades de vista, como los porcentajes, son unidades relativas, pero se basan en elementos diferentes. Las unidades de la ventana gráfica son relativas a las dimensiones de la ventana gráfica (ancho o alto) de un dispositivo, y los porcentajes son relativos al tamaño del elemento contenedor primario. Las cuatro unidades de vista diferentes son:

vw: 10vw sería el 10% del ancho de la ventana vw: 10vw .
vh: 3vh sería el 3% de la altura de la ventana vh: 3vh .
vmin: 70vmin sería el 70% de la dimensión más pequeña de la ventana vmin: 70vmin (altura en función del ancho).
vmax: 100vmax sería el 100% de la dimensión más grande de la ventana vmax: 100vmax (altura en función del ancho).

Instructions

Establezca el width de la etiqueta h2 en el 80% del ancho de la ventana gráfica y el width del párrafo como el 75% de la dimensión más pequeña de la ventana gráfica.

Tests

tests:
  - text: Su etiqueta <code>h2</code> debe tener un <code>width</code> de 80vw.
    testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
  - text: Su etiqueta <code>p</code> debe tener un <code>width</code> de 75vmin.
    testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'

Challenge Seed

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

Solution

// solution required

2.6 KiB Raw Blame History