Tengo un fondo que está cambiando con una resolución diferente del navegador. Eso está funcionando perfectamente. Luego hay un texto que se escribe en js. Quiero cambiar el tamaño de ese texto con diferentes resoluciones del navegador también.

¿Sabes como hacer esto?

Talla normal: ingrese la descripción de la imagen aquí

Talla pequeña:

enter image description here

.wrap-hero-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-content {
  position: absolute;
  text-align: center;
  min-width: 110px;
  left: 50%;
  top: 58%;
  padding: 65px;
  outline-offset: 8px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
<div class="wrap-hero-content">
  <div class="hero-content">
    <span class="typed"></span>
  </div>
</div>
0
Dominik Skála 10 may. 2019 a las 10:42

3 respuestas

La mejor respuesta

Puede hacerlo fácilmente con css (puede jugar con el ancho mínimo y los tamaños de fuente para satisfacer sus necesidades:

 // default for less than 800px width
    .hero-content .typed {
         font-size:10px;
    }

@media (min-width: 800px) {
    .hero-content .typed {
         font-size:12px;
    }
}

@media (min-width: 1024px) {
    .hero-content .typed {
         font-size:14px;
    }
}
1
chatnoir 10 may. 2019 a las 07:59

Crear un tamaño de fuente especial para todos los dispositivos

$html-font-size-lg: 16px;
$html-font-size-md: 15px;
$html-font-size-sm: 14px;
$html-font-size-xs: 13px;

$paragraph-font-size-lg: 18px;
$paragraph-font-size-md: 16px;
$paragraph-font-size-sm: 14px;
$paragraph-font-size-xs: 12px;

html {

    font-size: $html-font-size-lg;
    line-height: 23px;

    @media (max-width: 1024px) {
        font-size: $html-font-size-md;
    }

    @media (max-width: 640px) {
        font-size: $html-font-size-sm;
    }

    @media (max-width: 480px) {
        font-size: $html-font-size-xs;
    }

}

O Usar em o rem para un tamaño de fuente receptivo Em es una unidad escalable igual al tamaño de fuente actual en el documento. Si no ha configurado el tamaño de fuente de manera predeterminada, el navegador lo configurará por usted. El tamaño de fuente predeterminado del navegador normalmente sería de 16 píxeles. Entonces 1em equivale a 16px por defecto. Si establece el tamaño de fuente para el documento 14px, 1em equivaldría a 14px, 2em equivaldría a 28px, 0.5em equivaldría a 7px, etc. Las unidades recomendadas son em y rem debido a su escalabilidad y su naturaleza amigable para dispositivos móviles.

// body font size
$browser-context: 16;

// function to convert px to em
@function em($pixels, $context: $browser-context) {
    @return #{$pixels/$context}em
}

html {
    line-height: 1.2;
    font-size: em(16);
}

h1 {
    // 72px
    font-size: em(72);
}

h2 {
    // 24px
    font-size: em(24);
}

ESTA ES LA MEJOR PRÁCTICA PARA LA TIPOGRAFÍA RESPONSABLE.

0
Imen Krichen 10 may. 2019 a las 08:00

Tendrás que usar algo como esto:

@media screen and (max-width : 320px)
{
  .your_text
  {
    font:10px;
  }
}
@media screen and (max-width : 1204px)
{
  .your_text
  {
    font:16px;
  }
}
2
Carlos Alves Jorge 10 may. 2019 a las 07:59