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


86

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.

Risposte:


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


16
Nota importante: devi aggiungerlo alla tua intestazione html. <meta name="viewport" content="width=device-width" /> Inoltre puoi usare al max-widthposto di max-device-widthper una sensazione più "reattiva".
Sheharyar

@ user65165 Non ho capito cosa stai cercando di dire?
Arpit Srivastava

max-device-width non funziona. Solo la larghezza massima funziona quando si regola la schermata del browser.
Ramisa Anjum Aditi

56

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


28
vw, vh, vminRoccia questa risposta.
Frank Lämmer

1
Questa è la risposta corretta ora, dato che le unità di visualizzazione sono supportate da tutti i browser *: caniuse.com/#feat=viewport-units .
cazzer

non dimenticarevmax
live2

33

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.

  1. 3.2vw = 3.2% della larghezza del viewport
  2. 3,2 vh = 3,2% dell'altezza del riquadro di visualizzazione
  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 css-tricks.com / .... e guarda anche caniuse.com / ....

Vecchio modo

  1. 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;
       }
    }
    
  2. 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 / ....


font-size: 3.2vw ha funzionato nel mio caso. Anche se non sono sicuro del supporto del browser.
manichino

"Un em è uguale alla dimensione del carattere corrente, ad esempio, se la dimensione del carattere del documento è 12pt, 1em è uguale a 12pt." In realtà, emè relativo alla dimensione del carattere del contenitore. Ciò può portare a un comportamento imprevisto quando il contenitore ha anche la dimensione del carattere impostata in em... Per ottenere la dimensione relativa al carattere del documento, utilizzare rem.
Stijn de Witt

19

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

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

  2. la dimensione del carattere html è impostata su 10 pixel:

    html {
      font-size: 100%;
      font-size: 62.5%;
    }
    
  3. 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+'%');
}

soluzione interessante, non è male. Ho testato di aver imparato facendo come uso, ma con questo ho risolto il testo di dimensioni 10px su finestre di dimensioni maxW, va bene? ma questo? cos'è "16" cos'è questo? var fpc = fw * 100/16;
Domenico Monaco


5

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



2

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

1

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à


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

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.