testo automatico ridimensionamento (font size) quando si ridimensiona la finestra?

Question

Ho cercato (invano) di costruire una pagina i cui elementi sarebbero ridimensionare come ho cambiato la dimensione della finestra. Ce l'ho a lavorare in css per le immagini non è un problema, ma io non riesco a ottenere lo stesso per il testo, e io non sono sicuro che è ancora possibile in CSS. E io non riesco a trovare uno script jQuery che realizza questo.

Quando un utente ridimensiona la finestra, ho in sostanza desidera che la pagina di scalare in modo dinamico e in modo fluido, senza che l'utente debba pagina di invocare lo zoom. Questo funziona bene sul mio div img tramite CSS, ma non per il testo, che rimane la stessa dimensione.

Tutte le idee?

Answer 1

ho dovuto fare da solo. Quello che ho fatto è che ho impostato una dimensione del testo base per il corpo, e le percentuali per tutte le altre dimensioni. Ho quindi utilizzato uno script jQuery semplice per modificare la dimensione di base sulla finestra di ridimensionamento. Le altre dimensioni quindi aggiornare pure.

Ho usato qualcosa di simile:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

e nel ResizeMe funzione, ho avuto questa:

//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);

Answer 2

Prova un plugin jQuery come FitText . Si ridimensiona automaticamente il testo in base alla larghezza dell'elemento genitore.

Un altro plugin per jQuery con lo stesso obiettivo è bigText (< a href = "http://www.zachleat.com/bigtext/demo/" rel = "noreferrer"> demo ).

Answer 3

E 'possibile fare questo con CSS3 Media Queries , specificando di base diversa di font-dimensioni a seconda delle dimensioni del browser. C'è un buon articolo per questo su A List Apart

Per il supporto di IE potrebbe essere in grado di incidere utilizzando CSS espressioni

Questo richiede l'uso di una base fissa font-size, per esempio sul tag body, e la percentuale o em basa formati altrove.

Answer 4

Sulla risposta di Lizzan, qui è una versione con il radice quadrata di larghezza e altezza per ottenere un dimensionamento proporzionale:

// When document has finished loading
$(document).ready(function() {

    var resizeText = function () {
        // Standard height, for which the body font size is correct
        var preferredFontSize = 180; // %
        var preferredSize = 1024 * 768;

        var currentSize = $(window).width() * $(window).height();
        var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
        var newFontSize = preferredFontSize * scalePercentage;
        $("body").css("font-size", newFontSize + '%');
    };

    $(window).bind('resize', function() {
        resizeText();
    }).trigger('resize');

});

Demo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Answer 5

Sto usando il trucco da http://practicaltypography.com/end-credits.html #bio M. Butterick:

    <style type="text/css">
<!--adattamento font-size a browser width-->
        @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
            body {
        max-width:1000px;
        min-width:520px;
        line-height:1.33em;
        margin:1em;
        background-color:#f7f7f7;
        font-family:Source Sans Pro;
        color:#361800;
        }
    </style>

Answer 6

roryf è sulla strada giusta!

Media Query è (uno dei) di risposta (s).

Il trucco è quello di utilizzare% per font di dimensioni in tutto il mondo a partire dal corpo. In questo modo la dimensione del carattere get ereditato e quando si cambia in corpo, si ottiene di cambiato in tutto il mondo.

Prova qualcosa di simile:

body { font-size: 100% }
h1 {font-size: 200% }

@media all and (max-width:600px) {
    body {font-size: 70%}
}

Quando il sito web di larghezza si riduce quindi 600px, quindi la dimensione del carattere si trasformerà al 70% di quello che era ovunque, in cui viene utilizzato% (anche h1 in questo esempio.)

Answer 7

Lizzans risposta è perfetta! Lasciare il -1 dove si trova! I gattini morivano in tutto il posto quando ho rimosso.

Al posto della variabile fontsize, basta impostarlo sul fontsize standard per la tua pagina. Il mio era 16.

Answer 8

È possibile rendere il testo resizible più semplice. Questa soluzione funziona per me. http://jsfiddle.net/VooDi/dka48dx8/

Per set corpo font-size, che equivale alla larghezza corrente interna finestra;

per jsfiddle 560 px;

body {
    font-size: 560px; 
}

js:

onresize=onload=function() {
    document.body.style.fontSize=window.innerWidth+"px"
}

e necessaria dimensione del font dell'elemento set in percentuale

<h1 style="font-size:5%">Resize this text!!!!</h1>

Questo è tutto. Spero che questo aiuta qualcuno.