Dimensione del carattere reattivo nei CSS

Ho creato un sito usando la griglia di Zurb Foundation 3 . Ogni pagina ha una 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 ridimensiono il browser alla dimensione mobile, il carattere grande non si regola e fa sì che il browser includa uno scorrimento orizzontale per adattarsi al testo grande.

L'ho notato nella pagina di esempio Tipografia di Zurb Foundation 3 , le intestazioni si adattano al browser man mano che viene compresso ed espanso.

Mi sto perdendo qualcosa di veramente ovvio? Come posso raggiungere questo obiettivo?

Il font-size non risponderà come questo, quando il ridimensionamento della finestra del browser. Invece rispondono alle impostazioni di zoom / tipo del browser, ad esempio se si preme Ctrle +insieme sulla tastiera mentre si è nel browser.

Media query

Dovresti cercare di utilizzare le query multimediali per ridurre la dimensione del carattere a determinati intervalli in cui inizia a rompere il tuo design e creare barre di scorrimento.

Ad esempio, prova ad aggiungere questo all'interno del tuo CSS in basso, modificando la larghezza di 320 pixel per ovunque il tuo design inizi a rompersi:

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

   body { 
      font-size: 2em; 
   }

}

Lunghezze percentuali della finestra

È inoltre possibile utilizzare le lunghezze percentuali viewport , come vw, vh, vmine vmax. Il documento W3C ufficiale per questo afferma:

Le lunghezze in percentuale della finestra sono relative alla dimensione del blocco contenente iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionate di conseguenza.

Ancora una volta, dallo stesso documento W3C ogni singola unità può essere definita come di seguito:

vw unit: uguale all'1% della larghezza del blocco contenente iniziale.

vh unit: uguale all'1% dell'altezza del blocco contenente iniziale.

unità vmin: uguale al più piccolo tra vw o vh.

unità vmax: uguale al più grande tra vw o vh.

E sono usati esattamente allo stesso modo di qualsiasi altro valore CSS:

.text {
  font-size: 3vw;
}

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

La compatibilità è relativamente buona come si può vedere qui . Tuttavia, alcune versioni di Internet Explorer e Edge non supportano vmax. Inoltre, iOS 6 e 7 hanno un problema con l'unità vh, che è stata risolta in iOS 8.

Puoi usare il valore del viewport invece di ems, pxs o pts:

1vw = 1% della larghezza della finestra

1vh = 1% dell'altezza della finestra

1vmin = 1vw o 1vh, a seconda di quale sia minore

1vmax = 1vw o 1vh, a seconda di quale sia maggiore

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

Dai trucchi CSS: Viewport Sized Typography

Ho cercato dei modi per superare questo problema e credo di aver trovato una soluzione:

Se riesci a scrivere l'applicazione per Internet Explorer 9 (e versioni successive) e tutti gli altri browser moderni che supportano CSS calc (), unità rem e unità vmin. Puoi utilizzarlo per ottenere testo scalabile senza query multimediali:

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

Eccolo in azione: http://codepen.io/csuwldcat/pen/qOqVNO

Usa gli mediaidentificatori CSS (è quello che usano [zurb]) per uno stile reattivo:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Se non ti dispiace usare una soluzione jQuery puoi provare il plugin TextFill

jQuery TextFill ridimensiona il testo per adattarlo a un contenitore e rende le dimensioni del carattere più grandi possibili.

https://github.com/jquery-textfill/jquery-textfill

Esistono diversi modi per raggiungere questo obiettivo.

Utilizzare una query multimediale , ma richiede dimensioni dei caratteri per diversi punti di interruzione:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Usa le dimensioni in % o em . Basta cambiare la dimensione del carattere di base e tutto cambierà. A differenza del precedente, puoi semplicemente cambiare il carattere del corpo e non h1 ogni volta o lasciare che la dimensione del carattere di base sia il valore predefinito del dispositivo e il resto tutto in em:

1. "Ems" (em) : "em" è un'unità scalabile. Un em è uguale alla dimensione del carattere corrente, ad esempio, se la dimensione del carattere del documento è 12 pt, 1 em è uguale a 12 pt. Gli ems sono di natura scalabile, quindi 2 em equivalgono a 24 pt, 0,5 em equivale a 6 pt, ecc.
2. Percentuale (%) : l'unità percentuale è molto simile all'unità "em", salvo alcune differenze fondamentali. Innanzitutto, l'attuale dimensione del carattere è pari al 100% (ovvero 12 pt = 100%). Durante l'utilizzo dell'unità percentuale, il testo rimane completamente scalabile per i dispositivi mobili e per l'accessibilità.

Vedi kyleschaeffer.com / ....

CSS 3 supporta nuove dimensioni relative alla porta di visualizzazione. Ma questo non funziona su Android:

1. 3.2vw = 3.2% della larghezza della finestra
2. 3.2 vh = 3.2% dell'altezza del viewport
3. 3.2vmin = Più piccolo di 3.2vw o 3.2vh

4. 3.2vmax = Più grande di 3.2vw o 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Vedi Trucchi CSS ... e guarda anche Posso usare ...

C'è un altro approccio alle dimensioni dei caratteri reattivi: usare le unità rem.

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Successivamente nelle query multimediali, è possibile regolare tutte le dimensioni dei caratteri modificando la dimensione del carattere di 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;
    }
}

Per farlo funzionare in Internet Explorer 7 e Internet Explorer 8 dovrai aggiungere un fallback con unità px:

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

Se stai sviluppando con Less , puoi creare un mixin che farà la matematica per te.

Supporto unità rem - http://caniuse.com/#feat=rem

La soluzione "vw" ha un problema quando si passa a schermi molto piccoli. Puoi impostare la dimensione di base e salire da lì con calc ():

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

Questo è parzialmente implementato nella fondazione 5.

Nel file _type.scss hanno due serie di variabili di intestazione:

// 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;

Per il medio, generano dimensioni basate sul primo set di variabili:

@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 per default, ovvero piccoli schermi, usano un secondo set di variabili per generare 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; }

È possibile utilizzare queste variabili e sovrascrivere il file scss personalizzato per impostare le dimensioni dei caratteri per le rispettive dimensioni dello schermo.

Una dimensione del carattere reattivo può anche essere fatta con questo codice JavaScript chiamato FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Tipografia web reattiva al suo meglio: dimensione del carattere basata sulla larghezza dell'elemento.

O questo codice JavaScript chiamato FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Rende flessibili le dimensioni dei caratteri. Usa questo plugin sul tuo design reattivo per ridimensionare in base al rapporto dei tuoi titoli.

Se stai usando uno strumento di costruzione, prova Rucksack.

Altrimenti, puoi usare le variabili CSS (proprietà personalizzate) per controllare facilmente le dimensioni minime e massime dei caratteri in questo modo ( 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);
}

Ho visto un ottimo articolo di CSS-Tricks . Funziona bene:

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

Per esempio:

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

Possiamo applicare la stessa equazione alla line-heightproprietà per modificarla anche con il browser.

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

Avevo appena avuto un'idea con cui devi solo definire la dimensione del carattere una volta per elemento, ma è ancora influenzato dalle query dei media.

Innanzitutto, ho impostato la variabile "--text-scale-unit" su "1vh" o "1vw", a seconda della finestra che utilizza le media query.

Quindi uso la variabile usando calc () e il mio numero moltiplicatore per la dimensione del carattere:

/* 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>

Nel mio esempio ho usato solo l'orientamento del viewport, ma il principio dovrebbe essere possibile con qualsiasi media query.

"FitText" di jQuery è probabilmente la migliore soluzione di intestazione reattiva. Dai un'occhiata a GitHub: https://github.com/davatron5000/FitText.js

Come con molti framework, una volta che "esci dalla griglia" e sovrascrivi il CSS predefinito del framework, le cose inizieranno a rompersi a destra e a sinistra. I frame sono intrinsecamente rigidi. Se dovessi utilizzare lo stile H1 predefinito di Zurb insieme alle loro classi di griglia predefinite, la pagina Web dovrebbe essere visualizzata correttamente sul dispositivo mobile (ad esempio, reattivo).

Tuttavia, sembra che tu voglia intestazioni 6.2em molto grandi, il che significa che il testo dovrà ridursi per adattarsi all'interno di un display mobile in modalità verticale. La soluzione migliore è utilizzare un plug-in jQuery di testo reattivo come FlowType e FitText . Se vuoi qualcosa di leggero, puoi dare un'occhiata al mio plugin jQuery per testo scalabile:

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

Esempio di utilizzo:

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

Nel Sass originale originale (non scss) è possibile utilizzare i mixin seguenti per impostare automaticamente i paragrafi e tutte le intestazioni " font-size.

Mi piace perché è molto più compatto. E più veloce da digitare. Oltre a ciò, offre la stessa funzionalità. Ad ogni modo, se vuoi ancora attenerti alla nuova sintassi - scss, sentiti libero di convertire il mio contenuto di Sass in scss qui: [CONVERT SASS TO SCSS QUI]

Di seguito ti do quattro mixin Sass. Dovrai modificare le loro impostazioni in base alle tue esigenze.

=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

Dopo aver finito di giocare con le impostazioni, effettua una chiamata su un mixin, ovvero: + config-and-run-font-generator () . Vedi codice sotto e commenti per maggiori informazioni.

Immagino che potresti farlo automaticamente per una media query come per i tag header, ma tutti usiamo media query diverse, quindi non sarebbe appropriato per tutti. Uso un approccio di progettazione mobile-first, quindi è così che lo farei. Sentiti libero di copiare e usare questo codice.

COPIA E INCOLLA QUESTE MISCELE SUL TUO FILE:

=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

CONFIGURA TUTTI I MIXIN AI TUOI BISOGNI - GIOCA CON esso! :) E POI CHIAMARLA SOPRA IL TUO CODICE SASS EFFETTIVO CON:

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

Ciò genererebbe questo output. È possibile personalizzare i parametri per generare diversi set di risultati. Tuttavia, poiché tutti noi utilizziamo query multimediali diverse, alcuni mixin che dovrai modificare manualmente (stile e media).

CSS GENERATO:

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;

}

Uso queste classi CSS e rendono fluido il mio testo su qualsiasi dimensione dello schermo:

.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);
}

 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; }

Esistono i seguenti modi per raggiungere questo obiettivo:

1. Utilizzare rem per es. 2.3 rem
2. Usali per es. 2.3em
3. Usa% per es. 2.3% Inoltre, puoi usare: vh, vw, vmax e vmin.

Queste unità verranno ridimensionate automaticamente in base alla larghezza e all'altezza dello schermo.

È possibile rendere reattiva la dimensione del carattere se la si definisce in vw (larghezza della finestra). Tuttavia, non tutti i browser lo supportano. La soluzione è utilizzare JavaScript per modificare la dimensione del carattere di base in base alla larghezza del browser e impostare tutte le dimensioni del carattere in%.

Ecco un articolo che descrive come rendere i caratteri responsive: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Ho trovato questa soluzione e funziona molto bene per me:

/* 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)));
}

Un modo per risolvere il problema del testo in modo che appaia bello sia su desktop che su dispositivo mobile / tablet consiste nel fissare le dimensioni del testo a unità fisiche come centimetri fisici o pollici, che non dipendono dal PPI dello schermo (punti per pollice).

Sulla base di questa risposta , di seguito è riportato il codice che utilizzo alla fine del documento HTML per una dimensione del carattere reattivo:

<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>

Nel codice sopra agli elementi di una classe diversa sono assegnate dimensioni dei caratteri in unità fisiche, purché il browser / sistema operativo sia configurato correttamente per il PPI del suo schermo.

Un carattere di unità fisica non è sempre troppo grande e non troppo piccolo, purché la distanza dallo schermo sia normale (distanza di lettura del libro).

La dimensione del testo può essere impostata con vwun'unità, che significa "larghezza della finestra". In questo modo la dimensione del testo seguirà la dimensione della finestra del browser:

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

Per il mio progetto personale ho usato vw e @meida. Funziona perfettamente.

.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;
    }
}

Usa questa equazione:

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

Per qualcosa di più grande o più piccolo di 1440 e 768, puoi dare un valore statico o applicare lo stesso approccio.

Lo svantaggio con la soluzione vw è che non è possibile impostare un rapporto di scala, diciamo che un 5vw alla risoluzione dello schermo 1440 potrebbe finire per essere una dimensione del carattere di 60px, la dimensione del carattere della tua idea, ma quando riduci la larghezza della finestra fino a 768, potrebbe finire essendo 12px, non il minimo che desideri.

Con questo approccio, puoi impostare il limite superiore e il limite inferiore e il carattere si ridimensionerà in mezzo.

Possiamo usare calc () da css

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

La formula matematica è calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Temo che non vi sia alcuna soluzione semplice per quanto riguarda il ridimensionamento dei caratteri. È possibile modificare la dimensione del carattere utilizzando una query multimediale, ma tecnicamente non verrà ridimensionata correttamente. Ad esempio, se si utilizza:

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

il vostro font-sizesarà 3em sia per 300 pixel e larghezza 200 pixel. Ma hai bisogno di abbassartifont-size larghezza a 200 px per renderti perfetto.

Allora, qual è la vera soluzione? C'è solo un modo. Devi creare un'immagine PNG (con uno sfondo trasparente) contenente il tuo testo. Successivamente puoi facilmente rendere la tua immagine reattiva (ad esempio: larghezza: 35%; altezza: 28px). In questo modo il tuo testo sarà pienamente reattivo con tutti i dispositivi.

Dopo molte conclusioni ho finito con questa combinazione:

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

    h2 {
        font-size: 4.3vw;
    }
}

prova questo

html { font-size: min(max(16px, 4vw), 22px); }

ottenuto da https://css-tricks.com/simplified-fluid-typography/

Ecco qualcosa che ha funzionato per me. L'ho provato solo su un iPhone.

Se avete h1, h2o ptag mettere questo in tutto il testo:

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

Questo rende un testo 22pt su un desktop ed è ancora leggibile su iPhone.

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