¿Cómo cambiar el tamaño de fuente según el ancho del contenedor?

Hay varias formas de poner texto en un contenedor y tener un tamaño para llenar ese contenedor.
Existen diferentes métodos, como el uso de CSS y jQuery, que se explican a continuación.

Uso de la propiedad CSS (ancho de la ventana gráfica): es vwuna propiedad CSS para crear una tipografía receptiva en el archivo HTML. La ventana gráfica tiene el tamaño de una ventana de navegador. El «tamaño del texto» se puede configurar con unidades «vw» y puede encontrar un número exacto en el que el texto se ajuste bastante al contenedor y no se rompa al cambiar el tamaño de la ventana del navegador.

1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 100 cm de ancho, 1vw es 10 cm.

Ejemplo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to change font size 
        depending on the width 
        of container?
    </title>
  
    <style>
        h1 {
            font-size: 8vw;
            color: green;
            font-weight: bold;
        }
  
        p {
            font-size: 3vw;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Resize the browser window 
        to see how the font size 
        changes.
    </p>
</body>
  
</html>

Producción:

  • En el escritorio:
    Font size on Desktop
  • En iPad:
    Font size on Ipad

Uso de la propiedad CSS (consultas de medios): también puede usar consultas de medios para cambiar el tamaño de fuente de un elemento en tamaños de pantalla específicos. La @mediaregla, que permite definir diferentes reglas de estilo para diferentes tipos de medios.

Ejemplo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to change font size 
        depending on width of 
        container?
    </title>
      
    <style>
        h1 {
            color: green;
        }
  
        @media screen and (min-width: 601px) {
            h1 {
                font-size: 80px;
            }
  
            p {
                font-size: 40px;
            }
        }
  
        @media screen and (max-width: 600px) {
            h1 {
                font-size: 40px;
            }
  
            p {
                font-size: 20px;
            }
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Set the <em>font-size</em> of "h1" 
        to "40px" and <em>paragraph</em> to
        "20px", when the window's width is
        "600px" wide or less and when it 
        is "601px" or wider, set the 
        <em>font-size</em> to "80px" and
        <em>paragraph</em> to "40px". 
        Resize the browser window to 
        see the effect.
    </p>
</body>
  
</html>

Producción:

  • En el escritorio:
    Font scale on desktop using media query
  • En iPad:
    Font scale on ipad using media query

Uso del complemento FitText jQuery: hay un complemento jquery que puede hacer que los tamaños de fuente sean flexibles en el diseño receptivo, a saber, FitText. Por ejemplo, se puede usar el complemento para hacer tamaños de texto escalables con respecto al ancho del contenedor.

Ejemplo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>H
        ow to change font size 
        depending on width of c
        ontainer?
    </title>
      
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Resize the browser window 
        to see how the font size 
        scales.
    </p>
  
    <script type="text/javascript" src=
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/textFit.js">
    </script>
      
    <script type="text/javascript">
        textFit(document.querySelector("h1"));
    </script>
</body>
  
</html>

Producción:

  • En el escritorio:
    Scale font-size using JQuery Plugin
  • En iPad:
    Scale font-size using JQuery plugin

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por ankitabag123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *