Tamanho da fonte responsivo em CSS


341

Eu criei um site usando a grade do Zurb Foundation 3 . Cada página possui uma grande h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Quando redimensiono o navegador para o tamanho móvel, a fonte grande não se ajusta e faz com que o navegador inclua uma rolagem horizontal para acomodar o texto grande.

Percebi que, na página de exemplo da Tipografia do Zurb Foundation 3 , os cabeçalhos se adaptam ao navegador conforme ele é compactado e expandido.

Estou perdendo algo realmente óbvio? Como faço para conseguir isso?


11
Dê uma olhada aqui: Tamanho da fonte responsivo apenas com css https://github.com/pavelkukov/Font-Size-Responsive-CSS Demo: http://fiddle.jshell.net/dgJaK/1/show/
pavel

2
Primeiro link desatualizado, eu acho

OMG, tantas respostas complicadas. basta usar css rem .
Home

O css rem não é redimensionado dinamicamente com base na janela da janela de visualização. Se você precisar fazer isso, precisará de Javascript ou de uma das respostas CSS3 puras abaixo. É realmente apenas algo que você precisa em um texto de cabeçalho grande.
Evan Donovan

@ToolmakerSteve Isso é uma coisa muito ingênua de se dizer, especialmente com as questões de ser responsivo em todos os dispositivos. rem não é realmente uma ótima opção, você parece ignorar as respostas porque é "complicado"?
Emobe

Respostas:


287

O font-sizenão responderá assim ao redimensionar a janela do navegador. Em vez disso, responder às configurações de tamanho navegador zoom / Tipo, como se você pressionar Ctrle +em conjunto no teclado enquanto no browser.

Consultas de mídia

Você precisaria usar consultas de mídia para reduzir o tamanho da fonte em determinados intervalos em que ele começa a interromper seu design e a criar barras de rolagem.

Por exemplo, tente adicionar isso dentro do seu CSS na parte inferior, alterando a largura de 320 pixels para onde quer que seu design comece a quebrar:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Comprimentos de porcentagem da janela de visualização

Você também pode usar o tamanho da porcentagem da janela de visualização , como vw,vh , vmine vmax. O documento oficial do W3C para esses estados:

Os comprimentos de porcentagem da viewport são relativos ao tamanho do bloco inicial. Quando a altura ou largura do bloco inicial é alterada, elas são dimensionadas de acordo.

Novamente, a partir do mesmo documento W3C, cada unidade individual pode ser definida como abaixo:

unidade vw - igual a 1% da largura do bloco inicial.

vh unit - Igual a 1% da altura do bloco inicial.

unidade vmin - igual ao menor de vw ou vh.

unidade vmax - igual ao maior de vw ou vh.

E eles são usados ​​exatamente da mesma maneira que qualquer outro valor CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

A compatibilidade é relativamente boa, como pode ser visto aqui . No entanto, algumas versões do Internet Explorer e Edge não oferecem suporte ao vmax. Além disso, o iOS 6 e 7 têm um problema com a unidade vh, que foi corrigida no iOS 8.


44
Que tal font-size: 1.5vw;?
Dev_NIX

23
Melhor ainda, font-size: calc(12px + 1vw)
Cuzox

3
@Dev_NIX Que tal isso?
Christiaan Westerbeek

11
Gostei do que a @Cuzox propõe - é o que eu estava procurando #
Eleazar Resendez

@ Cuzox Você deve enviar que, como resposta, outras soluções reduzem o caminho do teste para poder usar esses métodos para qualquer coisa útil. Quando você combina uma altura estática como que o torna útil
Ricks

617

Você pode usar o valor da viewport em vez de ems, pxs ou pts:

1vw = 1% da largura da janela de visualização

1vh = 1% da altura da janela de visualização

1vmin = 1vw ou 1vh, o que for menor

1vmax = 1vw ou 1vh, o que for maior

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Truques em CSS: Tipografia dimensionada para viewport


2
Estou neste momento a única codificação para webkit - Estou apaixonado por esta medida obrigado
iamwhitebox


19
Ótimo, eu posso usar o vw para dimensionar o texto para que não pareça insignificante em uma área de trabalho! Perfeito ... Oh. Agora, o texto é pequeno demais para ser lido quando visto em um telefone. Ok, posso apenas usar "max (x, y)" para garantir que não diminua além do tamanho mínimo. Perfeito ... Oh. Hmm. Parece que "max" não é suportado corretamente pelo Chrome. Ok, acho que vou usar "px" novamente.
original_username

10
Isso não me parece prático, pois o tamanho se torna pequeno demais para celulares e grande demais para desktops de alta resolução.
Mr_Green

7
@ Mr_Green: É por isso que você usa consultas de mídia. Em viewports menores, a fonte é maior; em viewports maiores, ela é menor.
Alistair

45

Venho estudando maneiras de superar esse problema e acredito que encontrei uma solução:

Se você pode gravar seu aplicativo para o Internet Explorer 9 (e posterior) e todos os outros navegadores modernos que suportam CSS calc (), unidades rem e unidades vmin. Você pode usar isso para obter texto escalável sem consultas de mídia:

body {
  font-size: calc(0.75em + 1vmin);
}

Aqui está em ação: http://codepen.io/csuwldcat/pen/qOqVNO


2
Devo observar que a diferença aqui é que usar o calc para combinar as duas unidades é uma maneira fácil de ajudar a silenciar a variação na escala de texto vw em extremos.
Csuwldcat # 27/15

as unidades de viewport são ótimas para qualquer projeto que não precise de compatibilidade com navegadores antigos. Este truque calc faz exatamente o que você diz, escalando o texto sem problemas (oposição a limites estritos definidos pelo consultas de mídia), mas em uma proporção menor do que a mudança no tamanho da tela (ou superior!)
Ward DS

Como deve ser usado? Quero dizer, se eu quiser alterar o tamanho da minha fonte, devo alterar apenas a unidade em, somente a unidade vmin ou as duas?
snoob dogg

Eu vim aqui para escrever esta solução extremamente simples, mas depois vi sua resposta e dei +1. Podemos aplicar esta solução a todos os elementos. Por exemplo, largura da imagem: calc (50px + 10vw)
y.selimdogan

35

Use mediaespecificadores CSS (que é o que eles [zurb] usam) para um estilo responsivo:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}


15

Existem várias maneiras de conseguir isso.

Use uma consulta de mídia , mas requer tamanhos de fonte para vários pontos de interrupção:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Use dimensões em % ou em . Basta alterar o tamanho da fonte base e tudo mudará. Diferente da anterior, você pode alterar a fonte do corpo e não o h1 todas as vezes ou permitir que o tamanho da fonte base seja o padrão do dispositivo e o restante em:

  1. "Ems" (em) : O "em" é uma unidade escalável. Um em é igual ao tamanho da fonte atual, por exemplo, se o tamanho da fonte do documento for 12 pt, 1 em será igual a 12 pt. Ems são escaláveis ​​por natureza, então 2 em seria igual a 24 pt, 0,5 em seria igual a 6 pt, etc.
  2. Porcentagem (%) : a unidade de porcentagem é muito parecida com a unidade "em", exceto por algumas diferenças fundamentais. Em primeiro lugar, o tamanho da fonte atual é igual a 100% (ou seja, 12 pt = 100%). Ao usar a unidade de porcentagem, seu texto permanece totalmente escalável para dispositivos móveis e para acessibilidade.

Veja kyleschaeffer.com / ....

O CSS 3 suporta novas dimensões que são relativas à porta de visualização. Mas isso não funciona no Android:

  1. 3.2vw = 3.2% da largura da janela de visualização
  2. 3.2vh = 3,2% da altura da janela de visualização
  3. 3.2vmin = Menor de 3.2vw ou 3.2vh
  4. 3.2vmax = Maior de 3.2vw ou 3.2vh

    body
    {
        font-size: 3.2vw;
    }

Veja CSS-Tricks ... e também veja Can I Use ...


13

Há outra abordagem para tamanhos de fonte responsivos - usando unidades rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Posteriormente nas consultas de mídia, você pode ajustar todos os tamanhos de fonte alterando o tamanho da fonte base:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Para fazer isso funcionar no Internet Explorer 7 e no Internet Explorer 8, você precisará adicionar um fallback com unidades de px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Se você estiver desenvolvendo com Less , poderá criar um mixin que fará as contas para você.

Suporte a unidades rem - http://caniuse.com/#feat=rem


11

A solução "vw" tem um problema ao acessar telas muito pequenas. Você pode definir o tamanho da base e subir de lá com calc ():

font-size: calc(16px + 0.4vw);

Eu usei font-size: calc(1.2rem + 1vw)para uma posição. Dessa forma, tive a vantagem de usar uma unidade que não é baseada em pixels (embora isso possa não ser aplicável aqui). Também tive um fallback no ems simples para navegadores mais antigos Finalmente, como isso ficou um pouco pequeno no celular, usei uma consulta de mídia para eles. Isso pode ser muito elaborado, mas parece fazer o que eu queria.
Evan Donovan

8

Isso é parcialmente implementado na fundação 5.

No arquivo _type.scss, eles têm dois conjuntos de variáveis ​​de cabeçalho:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Para médias, eles geram tamanhos com base no primeiro conjunto de variáveis:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

E para telas pequenas padrão, por exemplo, elas usam um segundo conjunto de variáveis ​​para gerar CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Você pode usar essas variáveis ​​e substituir em seu arquivo scss personalizado para definir tamanhos de fonte para os respectivos tamanhos de tela.


6

Um tamanho de fonte responsivo também pode ser feito com esse código JavaScript chamado FlowType :

FlowType - Tipografia web responsiva da melhor forma possível: tamanho da fonte com base na largura do elemento.

Ou esse código JavaScript chamado FitText :

FitText - Torna os tamanhos das fontes flexíveis. Use este plug-in em seu design responsivo para redimensionar com base em proporção seus títulos.


6

Se você estiver usando uma ferramenta de construção, tente Rucksack.

Caso contrário, você pode usar variáveis ​​CSS (propriedades personalizadas) para controlar facilmente os tamanhos mínimo e máximo de fonte da seguinte forma ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Você tem uma referência à mochila de que fala?
Peter Mortensen

5

Eu vi um ótimo artigo do CSS-Tricks . Funciona muito bem:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Por exemplo:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Podemos aplicar a mesma equação à line-heightpropriedade para que ela também seja alterada no navegador.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Existe uma maneira de fazer com que o tamanho da fonte não seja maior que o [tamanho máximo] definido?
Igor Janković

4

Acabei de ter uma idéia com a qual você só precisa definir o tamanho da fonte uma vez por elemento, mas ele ainda é influenciado por consultas de mídia.

Primeiro, defino a variável "--text-scale-unit" como "1vh" ou "1vw", dependendo da janela de exibição usando as consultas de mídia.

Então eu uso a variável usando calc () e meu número multiplicador para o tamanho da fonte:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

No meu exemplo, usei apenas a orientação da janela de exibição, mas o princípio deve ser possível com qualquer consulta de mídia.


2
Por que você simplesmente não usa vmine, em vmaxvez deste @medianegócio?
precisa saber é o seguinte

3

O "FitText" do jQuery é provavelmente a melhor solução de cabeçalho responsivo. Confira no GitHub: https://github.com/davatron5000/FitText.js


2
Isso não parece ser uma resposta direta à pergunta sobre por que a fonte não se ajusta. Em qualquer caso, as respostas apenas para links não são incentivadas no SO. Por favor, considere adicionar mais detalhes / código de exemplo.
Harry

2

Como em muitas estruturas, uma vez que você "sai da grade" e substitui o CSS padrão da estrutura, as coisas começam a quebrar à esquerda e à direita. Estruturas são inerentemente rígidas. Se você usar o estilo H1 padrão do Zurb junto com suas classes de grade padrão, a página da web deverá ser exibida corretamente no celular (ou seja, responsivo).

No entanto, parece que você deseja cabeçalhos 6.2em muito grandes, o que significa que o texto terá que encolher para caber dentro de uma tela móvel no modo retrato. Sua melhor aposta é usar um plug-in jQuery de texto responsivo, como FlowType e FitText . Se você quiser algo leve, verifique o meu plugin jQuery Scalable Text:

http://thdoan.github.io/scalable-text/

Uso da amostra:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Acho que redimensionar texto / redimensionar texto para uso responsivo deve ser deixado para o navegador, especialmente para as consultas de mídia, para o que elas foram projetadas.
user254197

2

No Sass original real (não scss), você pode usar os mixins abaixo para definir automaticamente os parágrafos e todos os títulos 'font-size .

Gosto porque é muito mais compacto. E mais rápido de digitar. Fora isso, ele fornece a mesma funcionalidade. De qualquer forma, se você ainda deseja manter a nova sintaxe - scss, sinta-se à vontade para converter meu conteúdo Sass para scss aqui: [CONVERTE SASS TO SCSS AQUI]

Abaixo, dou-lhe quatro mixins Sass. Você precisará ajustar as configurações para suas necessidades.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Depois de terminar de jogar com as configurações, basta ligar para um mixin - que é: + config-and-run-font-generator () . Veja o código abaixo e os comentários para obter mais informações.

Eu acho que você poderia fazer isso automaticamente para uma consulta de mídia, como é feito para tags de cabeçalho, mas todos nós usamos consultas de mídia diferentes, portanto não seria apropriado para todos. Eu uso uma abordagem de design para dispositivos móveis, então é assim que eu faria isso. Sinta-se livre para copiar e usar este código.

Copie e cole essas mixagens em seu arquivo:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

CONFIGURE TODAS AS MIXINS ÀS SUAS NECESSIDADES - JOGUE COM ELE! :) E depois ligue para o topo do seu código SASS REAL com:

+config-and-run-font-generator()

Isso geraria essa saída. Você pode personalizar parâmetros para gerar diferentes conjuntos de resultados. No entanto, como todos usamos consultas de mídia diferentes, você precisará editar alguns mixins manualmente (estilo e mídia).

CSS GERADO:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

2

Eu uso essas classes CSS e elas tornam meu texto fluido em qualquer tamanho de tela:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

1
 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

6
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Tony Babarino

Uma explicação estaria em ordem.
Peter Mortensen

1

Existem as seguintes maneiras pelas quais você pode conseguir isso:

  1. Use rem para, por exemplo, 2,3 rem
  2. Use em para, por exemplo, 2.3em
  3. Use% para, por exemplo, 2,3% Além disso, você pode usar: vh, vw, vmax e vmin.

Essas unidades serão redimensionadas automaticamente, dependendo da largura e altura da tela.


1

Você pode tornar o tamanho da fonte responsivo se defini-lo em vw (largura da janela de exibição). No entanto, nem todos os navegadores são compatíveis. A solução é usar JavaScript para alterar o tamanho da fonte base, dependendo da largura do navegador e definir todos os tamanhos de fonte em%.

Aqui está um artigo descrevendo como criar fontes responsivas: http://wpsalt.com/responsive-font-size-in-wordpress-theme/


O link parece estar quebrado: "403 Proibido. Nginx / 1.10.3"
Peter Mortensen

1

Eu encontrei esta solução e funciona muito bem para mim:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

1

Uma maneira de resolver o problema de o texto ter uma boa aparência em computadores e dispositivos móveis / tablets é fixar o tamanho do texto em unidades físicas, como centímetros ou polegadas físicas, que não dependem do PPI da tela (pontos por polegada).

Com base nesta resposta , abaixo está o código que utilizo no final do documento HTML para um tamanho de fonte responsivo:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

No código acima, os itens de uma classe diferente recebem tamanhos de fonte atribuídos em unidades físicas, desde que o navegador / SO esteja configurado corretamente para o PPI de sua tela.

Uma fonte de unidade física nem sempre é muito grande e nem muito pequena, desde que a distância da tela seja normal (distância de leitura de livros).


1

O tamanho do texto pode ser definido com uma vwunidade, o que significa "largura da janela de exibição". Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Para o meu projeto pessoal, usei vw e @meida. Funciona perfeitamente.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

1

Use esta equação:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Para algo maior ou menor que 1440 e 768, você pode atribuir um valor estático ou aplicar a mesma abordagem.

A desvantagem da solução vw é que você não pode definir uma proporção de escala, digamos que um 5vw na resolução de tela 1440 pode acabar sendo do tamanho da fonte de 60px, o tamanho da fonte da sua ideia, mas quando você reduz a largura da janela para 768, pode acabar sendo 12px, não o mínimo que você deseja.

Com essa abordagem, você pode definir o limite superior e o limite inferior, e a fonte se dimensionará no meio.


1

Podemos usar calc () de css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

A fórmula matemática é calc (tamanho minimo + (tamanho maximo - tamanho minimo) * (100vm - largura da porta minview) / (largura de porta minview) / (maxwidthviewoport - minviewportwidth)))

Codepen


0

Receio que não haja uma solução fácil com relação ao redimensionamento de fontes. Você pode alterar o tamanho da fonte usando uma consulta de mídia, mas tecnicamente não será redimensionado sem problemas. Por exemplo, se você usar:

@media only screen and (max-width: 320px){font-size: 3em;}

você font-sizeserá 3em para uma largura de 300 e 200 pixels. Mas você precisa de menosfont-size largura a 200 px para obter uma resposta perfeita.

Então, qual é a solução real? Há apenas um caminho. Você precisa criar uma imagem PNG (com fundo transparente) contendo seu texto. Depois disso, você pode facilmente tornar sua imagem responsiva (por exemplo: largura: 35%; altura: 28px). Dessa forma, seu texto será totalmente responsivo a todos os dispositivos.


0

Depois de muitas conclusões, acabei com essa combinação:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}


-1

Aqui está algo que funcionou para mim. Eu só testei em um iPhone.

Se você tem h1, h2ou ptags de colocar isso em torno de seu texto:

<h1><font size="5">The Text you want to make responsive</font></h1>

Isso renderiza um texto de 22 pontos em uma área de trabalho e ainda é legível no iPhone.

<font size="5"></font>

14
Estamos em 2015. A tag Font está obsoleta no HTML5.
Dan H

Eu pensei que a tag da fonte era obsoleta developer.mozilla.org/en-US/docs/Web/HTML/Element/font Eu não acho que ela esteja obsoleta ainda, mas será em algum momento.
Jake

11
@ Jake: foi preterido no HTML4 e no HTML5 é obsoleto. A remoção segue a descontinuação, e não o contrário.
santon
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.