Dimensione del carattere reattivo nei CSS


343

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?


1
Dai un'occhiata qui: Responsive Font-Size solo con css https://github.com/pavelkukov/Font-Size-Responsive-CSS Demo: http://fiddle.jshell.net/dgJaK/1/show/
pavel

2
Primo collegamento obsoleto, credo

Oh mio Dio, tante risposte complicate. basta usare css rem .
ToolmakerSteve

css rem non si ridimensiona in modo dinamico in base alla finestra della finestra. Se hai bisogno di farlo, allora hai bisogno di Javascript o di una delle risposte CSS3 pure di seguito. È davvero solo qualcosa di cui hai bisogno sul testo di grandi titoli.
Evan Donovan,

@ToolmakerSteve Questa è una cosa molto ingenua da dire, soprattutto con i problemi di essere reattivi su tutti i dispositivi. rem non è proprio una grande opzione, sembra che ignori le risposte perché è "complicato"?
Emobe

Risposte:


289

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.


44
Che dire font-size: 1.5vw;?
Dev_NIX,

24
Meglio ancora,font-size: calc(12px + 1vw)
Cuzox,

3
@Dev_NIX Che ne pensi?
Christiaan Westerbeek,

1
Mi è piaciuto quello che propone @Cuzox - è quello che stavo cercando
Eleazar Resendez

@Cuzox Dovresti presentare che come risposta, altre soluzioni portano il modo di test a piccoli per poter usare quei metodi per qualsiasi cosa utile. Quando si combina un'altezza statica del genere, la rende utile
crea il

618

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


2
Attualmente sto solo codificando il webkit - sono innamorato di questa misurazione grazie
iamwhitebox


19
Fantastico, posso usare vw per ridimensionare il testo in modo che non appaia scadente su un desktop! Perfetto ... Oh. Eh, ora il testo è troppo piccolo per essere letto quando visto al telefono. Va bene, posso solo usare "max (x, y)" per assicurarmi che non si riduca oltre una dimensione minima. Perfetto ... Oh. Hmm. Sembra che "max" non sia supportato correttamente da Chrome. Bene, suppongo che userò di nuovo "px".
originale

10
Questo non mi sembra pratico poiché la dimensione diventa troppo piccola nei cellulari e troppo grande nei desktop con risoluzione più elevata.
Mr_Green,

7
@Mr_Green: ecco perché usi le query multimediali. Su finestre più piccole, ingrandire il carattere, su finestre più grandi, ridurlo.
Alistair,

45

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


2
Dovrei notare che la differenza qui è che l'uso di calc per combinare le due unità è un modo semplice per aiutare a silenziare la varianza nella scala del testo VW agli estremi.
csuwldcat,

le unità viewport sono perfette per qualsiasi progetto che non necessita di compatibilità con i vecchi browser. Questo trucco di calcolo fa esattamente quello che dici, ridimensionando il testo in modo uniforme (al contrario di limiti rigorosi stabiliti dalle query dei media) ma con un rapporto inferiore (o superiore!) Rispetto alla modifica delle dimensioni dello schermo
Ward DS

Come dovrebbe essere usato? Voglio dire, se voglio cambiare la dimensione del mio carattere, dovrei cambiare solo l'unità em, solo l'unità vmin o entrambe?
snoob dogg

Sono venuto qui per scrivere questa soluzione estremamente semplice ma poi ho visto la tua risposta e ho dato +1. Possiamo applicare questa soluzione ad ogni elemento. Ad esempio la larghezza dell'immagine: calc (50px + 10vw)
y.selimdogan

35

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

}


15

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


13

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


11

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

Ho usato font-size: calc(1.2rem + 1vw)per un'intestazione. In questo modo ho avuto il vantaggio di utilizzare un'unità non basata su pixel (anche se qui potrebbe non essere applicabile). Ho anche avuto un fallback nei semplici ems per i browser più vecchi Alla fine, da quando è diventato un po 'piccolo sui dispositivi mobili, ho usato una query multimediale per quelli. Potrebbe essere troppo elaborato, ma sembra fare quello che volevo.
Evan Donovan,

8

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.


6

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

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

O questo codice JavaScript chiamato FitText :

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


6

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

Hai un riferimento a quello zaino di cui parli?
Peter Mortensen,

5

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

C'è un modo per fare in modo che la dimensione del carattere non sia maggiore della [dimensione massima] definita?
Igor Janković,

4

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.


2
Perché non usi semplicemente vmine vmaxinvece di questa @mediaattività?
Gark Garcia,

3

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


2
Questa non sembra essere una risposta diretta alla domanda sul perché il carattere non si adatta. In ogni caso, in SO non sono incoraggiate solo le risposte dei link. Si prega di considerare l'aggiunta di ulteriori dettagli / codice di esempio.
Harry

2

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>

Penso che il ridimensionamento dei testi / il ridimensionamento del testo per un uso reattivo dovrebbe essere lasciato al browser, specialmente per le domande dei media per cui sono progettate.
user254197

2

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;

}

2

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

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
Sebbene questo frammento di codice possa risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e quelle persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
Tony Babarino,

Una spiegazione sarebbe in ordine.
Peter Mortensen,

1

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.


1

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


Il collegamento sembra interrotto: "403 Forbidden. Nginx / 1.10.3"
Peter Mortensen,

1

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

1

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


1

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

1

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.


1

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


0

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.


0

Dopo molte conclusioni ho finito con questa combinazione:

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

    h2 {
        font-size: 4.3vw;
    }
}


-1

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>

14
Questo è il 2015. Il tag del carattere è obsoleto a partire da HTML5.
Dan H

Pensavo che il tag del font fosse obsoleto developer.mozilla.org/en-US/docs/Web/HTML/Element/font Non credo che sia ancora deprecato ma lo sarà ad un certo punto.
Jake,

1
@Jake: è stato deprecato in HTML4 e con HTML5 è obsoleto. La rimozione segue l'ammortamento, non viceversa.
santon,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.