Tamanhos de fonte dinâmicos e responsivos e espaçamento usando unidades em e JavaScript

O dimensionamento dinâmico de fontes responsivo é algo que não vejo em muitos sites “responsivos”. Os pontos de interrupção são bons, mas tenho coisas melhores para fazer com meu tempo do que definir ajustes infinitos de tamanho de fonte. (você também!)

Para implementar isso, vamos aproveitar as vantagens da emunidade de tamanho de fonte no CSS.

Clique aqui para ver do que estou falando:
codepen.io/lawrencealan/full/eJqlu

Dimensionamento de texto usando a emunidade

Um único emé igual ao tamanho da fonte atual do pai mais próximo que possui um font-sizeconjunto.

Se o tamanho da fonte do documento for 12pt, 1em é igual a 12pt.
Se o tamanho da fonte do documento for 10px, 0,5em é igual a 5px.

Se o tamanho da fonte do documento é 8px, mas você tem um elemento com um tamanho da fonte de 20px, seu elemento de destino baseará seu tamanho de fonte no elemento pai mais próximo na cadeia com um conjunto de tamanho de fonte. Portanto, se você definir o tamanho da fonte do elemento de destino como 2em, ele atingirá o pai do tamanho da fonte de 20px e renderizará no tamanho da fonte de 40px.

Você também pode emescalonar em cadeia – fique atento, é fácil ignorar:

<div style="font-size:10px">
 <div style="font-size:1.5em">
  a
  <div style="font-size:1.5em">
   b
    <div style="font-size:1.5em">
    c
    </div> 
   </div>
 </div>
</div>

Produz cada letra 1,5 vezes o tamanho do div delimitador, então o tamanho da fonte para “a” seria 15px, “b” seria 22,5px e “c” seria 33,75px.

Outra emunidade divertida

Você também pode ajustar coisas como posições, preenchimento, margens, dimensões, praticamente qualquer coisa que aceite um pxvalor em CSS aceitará um emtamanho

Por exemplo, se alterarmos as definições CSS embutidas acima para em vez de , podemos obter uma margem automaticamente aumentada para elementos filho aninhados!margin-leftfont-size

Esse tipo de coisa é muito útil, especialmente quando você define um tamanho mínimo de pixel de base em seu código de dimensionamento dinâmico.

Tornando o dimensionamento relativo e dando prioridade à largura

Usando jQuery, obteremos a largura e altura da janela de visualização e, se a largura for uma dimensão maior do que a altura, daremos prioridade à área horizontal disponível ao calcular o tamanho da fonte para aplicar aos nossos elementos.

Você pode ter elementos dentro de nossos elementos classificados “dfs” que usam emdefinições de tamanho de fonte.

Observe que seu dfselemento classificado terá embutido e substituído. Portanto, você precisará de um elemento interno estilizado com tamanho de fonte. Apenas os tamanhos de fonte declarados na unidade serão redimensionados, os tamanhos de fonte em pixel são fixos em tamanho, não relativos.font-sizeline-heightemem

(function ($) {
        var _window = { w: window };

        function adjust_dfs(e) {
            var _fsx, _fsy, _fs, _adj, _n;

            // get the window dimensions
            _window.x = _window.w.innerWidth || _window.e.clientWidth || _window.g.clientWidth;
            _window.y = _window.w.innerHeight || _window.e.clientHeight || _window.g.clientHeight;

            // we get the "base font-size" by dividing into our "core" dimension on 1024x768 and multiplying
            // the result by 16 (initial font size for most 
            var _fsx = (_window.x / 1024) * 16;
            var _fsy = (_window.y / 768) * 16;

            // if width > height, then we get the average font size from width and height calculations
            // otherwise, if the width of the window is less than the height, we use the width based size
            var _fs = (_window.x > _window.y ? ((_fsx + _fsy) * 0.5) : _fsx );

            // our minimum base font-size should be 8px, or whatever you want
            if (_fs < 8) {
                _fs = 8;
            }

            // our maximum base font-size should be 20px, or whatever you want
            if (_fs > 20) {
                _fs = 20;
            }


            // we bring the decimal point down to two places, so our performance doesn't take a hit
            // when trying to calculate text at a size of 8.1294129836928352903862391em 
            _n = parseFloat(_fs, 10).toFixed(2);

            // setup the css definition object once
            _adj = {
                fontSize: _n + 'px'
            };

            // set the base font size onto our dfs class elements                
            $('.dfs').css(_adj);

        }

        // run once on load
        adjust_dfs();

        // run on window resize
        $(window).on('resize', adjust_dfs);

    })(jQuery);

E o HTML:

<html>
  <body>
    <h1 class="dfs">
      <span>Test Heading</span>
    </h1>
    <p class="dfs">
      <span>Static sized text, and also</span> <em>dynamic</em>
    </p>

    <div class="dfs" id="example_div">
    <header>Lipsum.</header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sint nesciunt odio ad eaque! Iste quod fugiat debitis culpa quas nobis! Blanditiis recusandae illo nam tempora quod omnis fugiat totam.</p>
  </div>
  </body>
</html>

Com CSS (SCSS):

body {
  padding:4px;

  h1.dfs {
    margin-left:2em;

    span {
      font-size:4.8em;
      line-height:0.8em;
    }
  }
  p.dfs {
        margin-left:3em;

    span {
     font-size:10px;
    }
    em {
      font-size:2em;
    }
  }
  #example_div {

    background: #eeeeee;           
    margin:2em;
    padding:1.5em 1em .5em 1em;
    width:24em;
    header {
     font-size:4em;
     line-height:0.8em;

    }
    p {
      font-size:12px;
      text-align:justify;
    }
  }
}

Novamente, você pode ver isso em ação aqui:
codepen.io/lawrencealan/full/eJqlu