Dimensione del carattere rispetto alla risoluzione dello schermo dell'utente?

Question 1

Ho un sito web fluido e il menu è il 20% della sua larghezza. Voglio che la dimensione del carattere del menu sia misurata correttamente in modo che si adatti sempre alla larghezza della casella e non vada mai a capo alla riga successiva. Stavo pensando di usare "em" come unità, ma è relativo alla dimensione del carattere del browser, quindi quando cambio la risoluzione la dimensione del carattere rimane la stessa.

Ho provato anche punti e percentuali. Niente funziona come ne ho bisogno ...

Dammi un suggerimento su come procedere, per favore.

Question 2

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

Puoi assegnarlo manualmente in base alle dimensioni dello schermo. Basta dare un'occhiata alle dimensioni dello schermo diverse e aggiungere manualmente la dimensione del carattere.

Question 3

È possibile utilizzare em, %, px. Ma in combinazione con media-queries Vedi questo collegamento per conoscere le media query. Inoltre, CSS3 hanno alcuni nuovi valori per il dimensionamento cose in relazione alla dimensione finestra corrente: vw, vh, e vmin. Vedi link a riguardo.

Question 4

Nuovo modo

Ci sono diversi modi per ottenere questo risultato.

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

3.2vw = 3.2% della larghezza del viewport
3,2 vh = 3,2% dell'altezza del riquadro di visualizzazione
3.2vmin = Più piccolo di 3.2vw o 3.2vh
3.2vmax = Più grande di 3.2vw o 3.2vh
```
body
{
    font-size: 3.2vw;
}
```

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

Vecchio modo

Utilizza la media query ma richiede dimensioni dei caratteri per diversi punti di interruzione

body
{
    font-size: 22px; 
}
h1
{
   font-size:44px;
}

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

Usa dimensioni in % o rem . 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 che la dimensione del carattere di base sia quella predefinita del dispositivo e riposare tutto in em.
- "Root Ems" (rem) : "rem" è un'unità scalabile. 1rem è uguale alla dimensione del carattere del corpo / html, ad esempio, se la dimensione del carattere del documento è 12pt, 1em è uguale a 12pt. Gli Ems di root sono di natura scalabile, quindi 2em equivale a 24pt, 0,5em equivale a 6pt, ecc.
- Percentuale (%) : l'unità percentuale è molto simile all'unità "em", salvo alcune differenze fondamentali. Innanzitutto, la dimensione del carattere corrente è pari al 100% (cioè 12pt = 100%). Durante l'utilizzo dell'unità percentuale, il testo rimane completamente scalabile per i dispositivi mobili e per l'accessibilità.

vedi kyleschaeffer.com / ....

Question 5

Ho sviluppato una bella soluzione JS - che è adatta per HTML completamente reattivo (cioè HTML costruito con percentuali)

Uso solo "em" per definire le dimensioni dei caratteri.

la dimensione del carattere html è impostata su 10 pixel:

html {
  font-size: 100%;
  font-size: 62.5%;
}

Chiamo una funzione di ridimensionamento dei caratteri su documento pronto:

// questo richiede JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}

Question 6

Potresti provare questo strumento: http://fittextjs.com/

Non ho usato questo secondo strumento, ma sembra simile: https://github.com/zachleat/BigText

Question 7

Non sono sicuro del perché sia complicato. Vorrei fare questo javascript di base

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Dove 12 significa 12px con una risoluzione di 1280. Decidi tu il valore che vuoi qui

Question 8

Questo ha funzionato per me:

body {

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

}

Spiegato in dettaglio qui: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

Question 9

Ho creato una variante di https://stackoverflow.com/a/17845473/189411

dove è possibile impostare la dimensione minima e massima del testo in relazione alla dimensione minima e massima della casella che si desidera "controllare". Inoltre è possibile controllare la dimensione dell'elemento dom diversa dalla casella in cui si desidera applicare la dimensione del testo.

Ridimensiona il testo tra 19 px e 25 px sull'elemento # size-2, in base alla larghezza di 500 px e 960 px dell'elemento # size-2

resizeTextInRange(500,960,19,25,'#size-2');

Ridimensiona il testo tra 13 px e 20 px sull'elemento # size-1, in base alla larghezza di 500 px e 960 px dell'elemento del corpo

resizeTextInRange(500,960,13,20,'#size-1','body');

il codice completo ci sono https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});

Question 10

Non utilizzare le media query è utile perché consente di ridimensionare gradualmente la dimensione del carattere.

L'utilizzo delle vwunità regolerà la dimensione del carattere rispetto alla dimensione della porta di visualizzazione.

La conversione diretta delle vwunità nella dimensione del carattere renderà difficile raggiungere il punto giusto sia per le risoluzioni mobili che per desktop.

Consiglio di provare qualcosa come:

body {
    font-size: calc(0.5em + 1vw);
}

Credito: CSS in profondità

Question 11

<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

Spero che questo possa aiutare. Sto usando questa formula per il mio gioco Phase.