Dimensione del carattere retriggers

Ho creato un sito utilizzando la griglia Zurb Foundation 3. Ogni pagina ha un grande h1.

CSS

body {font-size:100%} /* Headers */ h1 { font-size:6.2em;font-weight:500; } 

HTML

 

LARGE HEADER TAGLINE

Quando ridimensiono il browser in base alle dimensioni del dispositivo mobile, il carattere grande non viene regolato e il browser include uno scorrimento orizzontale per adattarsi al testo di grandi dimensioni.

Ho notato che nella pagina di esempio Tipografia di Zurb Foundation 3, le intestazioni si adattano al browser in quanto è compresso ed espanso.

Mi manca qualcosa di veramente ovvio? Come ottengo questo?

    Le font-size non risponderanno in questo modo quando ridimensionate la finestra del browser. Rispondono invece alle impostazioni della dimensione di zoom / tipo del browser, ad esempio se si premono Ctrl e + contemporaneamente sulla tastiera mentre si è nel browser.

    Media Queries

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

    Ad esempio, prova ad aggiungere questo all’interno del tuo CSS in fondo, modificando la larghezza di 320 px per il punto in cui il tuo design inizia a rompersi:

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

    Lunghezze percentuali di Viewport

    È inoltre ansible utilizzare lunghezze percentuali di viewport quali vw , vh , vmin e vmax . Il documento W3C ufficiale per questo stato:

    Le lunghezze percentuali di visualizzazione sono relative alla dimensione del blocco contenitore iniziale. Quando l’altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionati di conseguenza.

    Di nuovo, dallo stesso documento W3C ogni singola unità può essere definita come di seguito:

    unità vw – Uguale all’1% della larghezza del blocco contenitore iniziale.

    unità vh – Uguale all’1% dell’altezza del blocco contenitore iniziale.

    unità vmin: uguale al minore di vw o vh.

    unità vmax – Uguale al più grande di vw o vh.

    E vengono utilizzati esattamente nello 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 IE e Edge non supportano vmax. Inoltre, iOS 6 e 7 hanno un problema con l’unità vh, che è stato corretto in iOS 8.

    Puoi usare il valore di viewport invece di ems, px o pts.

    1vw = 1% della larghezza della finestra

    1vh = 1% di altezza del viewport

    1vmin = 1vw o 1vh, qualunque sia il più piccolo

    1vmax = 1vw o 1vh, qualunque sia il più grande

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

    da Css-tricks: http://css-tricks.com/viewport-sized-typography/

    Usa gli identificatori dei media CSS (è quello che usano [zurb]) per lo 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 aumenta la dimensione dei caratteri.

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

    Ho giocato con modi per superare questo problema e credo di aver trovato una soluzione:

    Se puoi scrivere la tua app per IE9 + e tutti gli altri browser moderni che supportano CSS calc (), rem unità e vmin units, puoi usarlo per ottenere un testo scalabile senza Media Query:

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

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

    Ci sono diversi modi per raggiungere questo objective

    Utilizza la 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, tutto cambierà. A differenza del precedente, puoi semplicemente cambiare il carattere del corpo e non h1 ogni volta o lasciare la dimensione del carattere di base al valore predefinito del dispositivo e riposare tutto in em

    1. “Ems” (em) : “em” è un’unità scalabile. Un em è uguale alla dimensione del font corrente, ad esempio, se la dimensione del font del documento è 12pt, 1em è uguale a 12pt. Gli Ems sono di natura scalabile, quindi 2em equivarrebbe a 24pt, .5em equivarrebbe a 6pt, ecc.
    2. Percentuale (%) : l’unità percentuale è molto simile all’unità “em”, salvo alcune differenze fondamentali. Innanzitutto, la dimensione del font corrente è pari al 100% (ovvero 12pt = 100%). Mentre si utilizza l’unità percentuale, il testo rimane completamente scalabile per i dispositivi mobili e per l’accessibilità.

    vedi kyleschaeffer.com / ….

    CSS3 supporta nuove dimensioni relative alla porta di visualizzazione. Ma questo non funziona in Android

    1. 3.2vw = 3.2% della larghezza della finestra
    2. 3,2vh = 3,2% dell’altezza della finestra
    3. 3.2vmin = Più piccolo di 3.2vw o 3.2vh
    4. 3.2 vmax = maggiore di 3.2vw o 3.2vh

       body { font-size: 3.2vw; } 

    vedi css-tricks.com / …. e guarda anche su caniuse.com / ….

    Questo è in parte implementato nella fondazione 5.

    in _type.scss hanno due set di variabili header

     // 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 medie superiori 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 gli schermi di piccole dimensioni predefiniti, 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; } 

    puoi usare queste variabili e sovrascrivere il tuo file scss personalizzato per impostare le dimensioni dei caratteri per le rispettive dimensioni dello schermo

    C’è un altro approccio alle dimensioni dei caratteri reattivi – utilizzando le unità rem.

     html { /* base font size */ font-size: 16px; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } 

    Più tardi nelle query multimediali, puoi modificare tutte le dimensioni dei caratteri cambiando 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 fare in modo che funzioni in IE7-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à i calcoli per te.

    Supporto per le unità Rem: http://caniuse.com/#feat=rem

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

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

    La dimensione del carattere reattivo può essere eseguita anche con questo javascript chiamato FlowType :

    FlowType – Tipografia web retriggers al suo massimo: dimensione del carattere basata sulla larghezza dell’elemento.

    O questo javascript chiamato FitText :

    FitText: rende flessibili le dimensioni dei caratteri. Usa questo plug-in sul tuo design reattivo per ridimensionare i titoli in base al rapporto.

    Se stai usando uno strumento di costruzione, prova con Zaino.

    Altrimenti, puoi usare le Variabili CSS (Proprietà personalizzate) per controllare facilmente le dimensioni minime e massime dei caratteri come ( 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); } 

    jQuery “FitText” è probabilmente la migliore soluzione di intestazione retriggers. Dai un’occhiata a Github: https://github.com/davatron5000/FitText.js

    Come con molti framework, una volta che “vai fuori dalla griglia” ed esegui l’override del CSS predefinito del framework, le cose inizieranno a rompersi a sinistra ea destra. I quadri 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 si vogliano intestazioni di 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 plugin jQuery di testo reattivo come FlowType e FitText . Se vuoi qualcosa di leggero, allora puoi dare un’occhiata al mio plugin jQuery in Testo Scalabile:

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

    Esempio di utilizzo:

      

    Puoi rendere reattivo la dimensione del carattere se lo definisci in vw (larghezza vista). Tuttavia non tutti i browser lo supportano. La soluzione è utilizzare JS per modificare le dimensioni del carattere di base in base alla larghezza del browser e impostare tutte le dimensioni dei caratteri in%. Ecco un articolo che descrive come rendere i caratteri sensibili: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

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

    Ci sono i seguenti modi con cui puoi ottenere questo risultato:

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

    Queste unità verranno autorizzate in base alla larghezza e all’altezza dello schermo.

    Nell’effettivo sass originale non è ansible utilizzare i mixaggi qui sotto per impostare automaticamente il paragrafo e tutte le intestazioni dei caratteri.

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

    Qui di seguito vi do quattro sass mixin. Dovrai modificare le loro impostazioni in base alle tue esigenze.

     =font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty =media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in 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, fai una chiamata su un mixin – che è: + config-and-run-font-generator () . Vedi codice sotto e commenti per maggiori informazioni.

    Immagino che tu possa farlo automaticamente per la query sui media come se fosse fatto per i tag di intestazione, ma tutti noi usiamo una query multimediale diversa, quindi non sarebbe appropriata per tutti. Io uso l’approccio mobile per la prima progettazione, quindi questo è il modo in cui lo farei. Sentiti libero di copiare e utilizzare questo codice.

    COPIA E INCOLLA QUELLI MIXINS AL 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 place holder 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 MIXINS ALLE TUE ESIGENZE – GIOCA CON ESSO! 🙂 E POI CHIAMARLO SULLA PARTE SUPERIORE DEL TUO CODICE SASS EFFETTIVO CON:

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

    Questo genererebbe questo output. È ansible personalizzare i parametri per generare diversi insiemi di risultati, tuttavia, poiché tutti noi utilizziamo diversi media, interrogiamo alcuni mix che dovrete 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; } 

    Dopo molte conclusioni ho finito con questa combinazione

     @media only screen and (max-width: 730px) { h2{ font-size: 4.3vw; } } 

    Temo che non ci sia una soluzione semplice per quanto riguarda il ridimensionamento dei font. È ansible modificare la dimensione del carattere utilizzando la query multimediale, ma tecnicamente non verrà ridimensionata senza problemi. Per un esempio, se usi:

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

    La dimensione del font sarà 3em sia per 300px che 200px larghezza. Ma hai bisogno di una dimensione del font inferiore per una larghezza di 200 px per renderti perfettamente reattivo.

    Quindi, qual è la vera soluzione? C’è solo un modo. Devi creare un’immagine png (con sfondo trasparente) contenente il tuo testo. Dopodiché puoi facilmente rendere la tua immagine retriggers (es: larghezza: 35%, altezza: 28px). In questo modo il tuo testo sarà pienamente reattivo con tutti i dispositivi.

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

    Se hai tag h1 , h2 o p metti questo intorno al tuo testo:

     

    The Text you want to make responsive

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