0

quiero poner un ejemplo tengo el siguiente código. Sin ningún tipo de css disponible

<body>
    <div id="main-container">
        <main>
            <h1 id="titulo">Database</h1>
            <input type="search" name="" id="input_search">
        </main>    
    </div>
  
</body>

Digamos que le quiero poner unos 500 px de altura. Bien, la pregunta es, cómo debo hacer los cálculos, para pasar de 500 px a em, es que he visto que según se crea una página web el tamaño de fuente por defecto es de 16px, lo que debo hacer es el calculo desde esos 16px para recibir la cantidad de em que necesitaría? Es que si es así, no entiendo porque se calcula por la fuente.

1 respuesta 1

2

Este concepto debe ser aclarado la unidad de medida em es relativa al tamaño de la fuente o a la heredada por la fuente:

para tener un espacio de 500px: debes tener la fuente declarada establecida un numero X que multiplicado por em te de 500px:

Referencia Documentación:

Esta unidad representa el tamaño calculado de fuente (font-size) del elemento. Si se usa dentro de la propiedad font-size, representa el tamaño de fuente heredado por el elemento. Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el ritmo vertical de la página, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS line-height, font-size, margin-bottom y margin-top generalemente tienen valores expresados en em.

Ejemplos:

html {
  font-size: 16px; /* 100% = 16px */
}
p {
  font-size: 1em; /* 1em = 16px */
}
h1 {
  font-size: 2em; /* 2em = 32px */
}
<p>Ejemplo de 1 em</p>
<h1>Ejemplo de 2 em</h1>

y es usado para hacer las web responsive si estableces el que:

html {
      font-size: 100%; /* 100% = 16px */
}

es bueno por que puedes llegar a tener algo así:

.component {
  width: 100%;
  border: 1px orange solid;
}
.component__header {
  font-size: 2rem;
  background-color: orange;
  color: white;
  padding: 1.5em 3rem; /* mezclando em y rem */
  margin: 0;
}
.component__header--large {
 font-size: 3rem;
}
.component__content {
 font-size: 1rem;
 padding: 1.5em 3rem;
 margin: 0;
}
<div class="component">
  <div class="component__header component__header--large">Título Grande</div>
  <div class="component__content">
    Lorem fistrum quietooor nostrud exercitation pupita sed qui apetecan ese que llega jarl esse. Torpedo occaecat te va a hasé pupitaa eiusmod. Pecador va usté muy cargadoo quis quis minim. Et sed veniam diodenoo aliqua. Ex sit amet quietooor papaar papaar velit no puedor no puedor llevame al sircoo commodo. Elit va usté muy cargadoo nisi hasta luego Lucas ad reprehenderit a peich ex.
  </div>
</div>

<div class="component">
  <div class="component__header">Título</div>
  <div class="component__content">
    Lorem fistrum quietooor nostrud exercitation pupita sed qui apetecan ese que llega jarl esse. Torpedo occaecat te va a hasé pupitaa eiusmod. Pecador va usté muy cargadoo quis quis minim. Et sed veniam diodenoo aliqua. Ex sit amet quietooor papaar papaar velit no puedor no puedor llevame al sircoo commodo. Elit va usté muy cargadoo nisi hasta luego Lucas ad reprehenderit a peich ex.
  </div>
</div

En resumen puedes hacer el diseño pensando en 500px pero todo dependera del tamaño de la fuente que el usuario escoja; si el usuario coloca la pantalla del navegador a 50% el cuadro sera de 250px; por que es relativo al tamaño de la fuente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.