Batalla de unidades CSS: EM vs. REMs… ¡LUCHA! ?

tl; dr no * solo * use px

Batalla de unidades CSS: EM vs. REMs… ¡LUCHA! ?

¡Entran dos unidades! Una unidad sale… ”–ThunderDOM

Antes de llegar al artículo, solo quiero compartir que estoy creando un producto y me encantaría recopilar algunos datos sobre cómo servir mejor a los desarrolladores web. Creé un breve cuestionario para consultar antes o después de leer este artículo. Por favor, compruébalo, ¡gracias! Y ahora, volvamos a nuestra programación habitual.

Estoy recopilando algunos datos sobre lo que los desarrolladores web necesitan de las herramientas educativas basadas en la web y me encantaría obtener sus respuestas. En la descripción de cada pregunta, he incluido mis propias respuestas para que tú también puedas conocerme mejor. ¿Hay ~ 15 preguntas? //t.co/qvGU3dF0DB.

- nombre de usuario [ZAYDEK] (@username_ZAYDEK) 8 de marzo de 2019

¿Quién ganaría en una pelea?

- nombre de usuario [ZAYDEK] (@username_ZAYDEK) 13 de abril de 2018

¡Hola! ? Soy Zaydek y estoy aquí para ayudar en el aprendizaje de HTML y CSS. En este artículo, exploraremos la diferencia entre las unidades "em" y "rem", y obtendremos comprensión de los primeros principios.

Cuando aprendí HTML y CSS por primera vez, fue un mundo de dolor porque entendí mal los conceptos básicos. Habiendo aprendido algo sobre la web, me gustaría compartir algunas ideas y aliento porque puede ser más fácil de lo que imaginas.

También enseñé un curso gratuito de HTML / CSS en Scrimba donde enseño cómo crear un blog hermoso desde * cero *. ¡Haga clic aquí para inscribirse! ?

Scrimba.com es una plataforma interactiva de front-end donde los sitios web se registran como eventos, no como videos, ¡y se pueden editar! ?

La unidad em

Em tiene una etimología interesante. emsin sospecharlo significa "M".

Esto parece recursivo, ¿no? ¿Cómo pueden ellos ser auto-referencia? Es tan astuto ... tan sutil. Bueno, em, como lo conocemos en CSS, no representa el carácter "m", sino una relación con su padre font-size.

Digamos que definimos:

   …  .a { font-size: 40px; } .b { font-size: 30px; } 

Aquí hemos definido un wrappercon dos spanelementos, cada uno sin contenido. ¡Así que nuestro sitio web es terrible! Pero lo que podemos hacer es darle a nuestros spanelementos algo de texto para demostrar cómo emfunciona:

 … hello from inside .a hello from inside .b …

Acabamos de agregar texto a nuestros spanelementos. Y el texto se muestra en diferentes tamaños 40pxy 30px. Establezcamos wrapperfont-sizeto 20px, y luego refactoricemos nuestro .ay .bfont-sizeusing em.

 …  .wrapper { font-size: 20px; } .a { font-size: 1.5em; } .b { font-size: 2.0em; }  …

¿Qué? ¡Nuestros párrafos font-sizehan cambiado! Ahora podemos comenzar a explorar cómo emfunciona. Si hubiéramos definido font-sizecomo 20px, 1emsignificaría 1 * 20px. Así que 1emes algo sin sentido.

Sin embargo, en nuestro CSS, definimos .afont-sizecomo 1.5emy .bfont-sizecomo 2.0em. Dado que su padre es 20px, estas expresiones se evalúan como 30pxy 40px. ¡Entonces, al contrario!

Hay una objeción al usoem.Si hubiéramos definido varios padres, como elementos dentro de elementos, cada uno con su propia em definición font-size, no sería intuitivo determinar qué es el niño font-size.

La unidad remota

remes para root em . Y gremes para Groot em , que no existe.

Entonces, an emes un multiplicador de su elemento padre, font-sizemientras que remes un multiplicador de su elemento raíz font-size. ¿Raíz?

 html <- root / \ head body / \ … …

Esto es lo que es nuestro sitio web: ¡un árbol! ¡Un árbol “al revés”!

 …  html { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; }  …

Aquí lo hemos reemplazado .wrapperpor html, porque ahora estamos usando rem. Dado esto, .ay .bahora heredamos su font-sizedel htmlelemento, como se supone que nuestro .wrapper.

Tenga en cuenta que nada ha cambiado: nuestro sitio web es idéntico, pero hemos roto una relación empadre-hijo con una relación remraíz-hijo .

Aún más, podemos reemplazar el htmlelemento con una pseudoclase:

:root { font-size: 20px; }

De nuevo, idéntico, pero semántico. Entonces, se remdiferencia de emporque en lugar de heredar el del padre font-size, salta al elemento htmlo :root. ¿Y si cambiáramos:rootfont-size ?

:root { font-size: 15px; }

¿Que pasó? Nuestra spanes 25% más pequeño - a evaluar 22.5pxy 30px- porque cambiamos el :rootfont-size. Y esta es una idea genial. Porque podemos escribir CSS no en reglas sino en relaciones.

Recapitulemos: usamos empara crear una relación superficial con el padre más cercano de un elemento que evalúa a font-sizemientras que usamos rempara crear una relación profunda con :root.

Las consultas de medios em y rem +

An even more awesome idea than how we use em and rem is using them in tandem for media queries. Media queries allow us to override CSS in some circumstance, such as the website’s width.

For example:

 …  p { color: green; } @media (max-width: 8.5in) { p { color: blue; } }  …

Here p renders green, but if the width is at or less than 8.5in, the same p reads blue. And we can go a step further than this: instead of using media queries for color, we can use them for font-size:

 …  :root { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; } @media (max-width: 650px) { :root { font-size: 3vw; } }  …

If our website is rendered at or less than 650px, our em and rem inherit their font-size not as 20px but 3vw, or 3% our viewport’s width. Having done so, we’ve connected our CSS as opposed to siloing it.

A final note: em and rem are not limited to font-size. We can use em and rem to describe width, height—wherever CSS expects a size. Compounding this with media queries makes us CSS superheroes.

Learning HTML and CSS doesn’t have to be painful—it can be subtle and these languages can be quite powerful. And em, rem, and grem are some of the most powerful units at our disposal we can use to design websites.

Don’t forget there’s a free course on Scrimba where I teach how to make the same website from *scratch*. Click here to enroll! ?