2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b1367417b2b2512b0c | Make Typography Responsive | 0 | Hacer que la tipografía responda |
Description
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 ventanavw: 10vw
. -
vh: 3vh
sería el 3% de la altura de la ventanavh: 3vh
. -
vmin: 70vmin
sería el 70% de la dimensión más pequeña de la ventanavmin: 70vmin
(altura en función del ancho). -
vmax: 100vmax
sería el 100% de la dimensión más grande de la ventanavmax: 100vmax
(altura en función del ancho).
Instructions
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