Wielkość czcionki w stosunku do rozdzielczości ekranu użytkownika?

Mam płynną stronę internetową, a menu ma 20% szerokości. Chcę, aby rozmiar czcionki w menu był mierzony prawidłowo, więc zawsze pasuje do szerokości pudełka i nigdy nie zawija do następnej linii. Myślałem o używaniu "em" jako jednostki, ale jest ono względne w stosunku do rozmiaru czcionki przeglądarki, więc gdy zmieniam rozdzielczość, rozmiar czcionki pozostaje taki sam.Wielkość czcionki w stosunku do rozdzielczości ekranu użytkownika?

Próbowano również pkt i odsetki. Nic nie działa tak, jak tego potrzebuję ...

Daj mi wskazówkę, jak postępować, proszę.

Źródło

2012-08-02 barakuda28

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

Można podać go ręcznie w zależności od wielkości ekranu screen.Just mieć wygląd różnej wielkości ekranu i dodać ręcznie rozmiar czcionki.

Źródło

2012-08-02 12:48:28

+11

Ważna uwaga: musisz dodać to do swojego html head. '' Możesz również użyć 'max-width' zamiast' max-device-width' dla uzyskania bardziej "responsywnego" wrażenia. – Sheharyar

@ user65165 Nie dostałem tego, co próbujesz powiedzieć? –

Można spróbować tego narzędzia: http://fittextjs.com/

Nie używałem tego drugiego narzędzia, ale wydaje się podobny: https://github.com/zachleat/BigText

Źródło

2012-08-02 12:43:00 CoderJK

Można użyć em, %, px. Ale w połączeniu z media-queriesSee this Link, aby dowiedzieć się o zapytań o media. Ponadto CSS3 ma kilka nowych wartości do zmiany rozmiaru bieżącego widoku: vw, vh i vmin. Zobacz o tym link.

Źródło

2012-08-02 12:45:58

+12

'vw' , 'vh',' vmin' kołyszą tę odpowiedź. –

Jest to teraz poprawna odpowiedź, biorąc pod uwagę, że jednostki widoku są obsługiwane przez każdą * przeglądarkę: http://caniuse.com/#feat=viewport-units. – cazzer

Mam opracowany piękny JS rozwiązanie - który nadaje się do całkowicie-responsive HTML (tj HTML zbudowany z procentów)

używam tylko „em” w celu określenia wielkości czcionki.

html rozmiar czcionki jest ustawiony na 10 pikseli:

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

I wywołać funkcję zmiany rozmiaru czcionki na dokument gotowy:

// Wymaga to 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+'%'); 
}

Źródło

2013-07-24 21:54:57

ciekawe rozwiązanie, nie jest złe. Przetestowałem, nauczyłem się, robiąc to, co używam, ale Jasne, że naprawiłem tekst o rozmiarze 10px w oknach o rozmiarze maksymalnym, jest ok? ale to? co to jest "16" co to jest? var fpc = fw * 100/16; –

sprawdź moją odmianę http://stackoverflow.com/a/39352651/189411 –

Istnieje kilka sposobów na osiągnięcie tego

Zastosowanie mediów zapytań ale wymaga rozmiary czcionek dla kilku przerwań

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

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

Stosować wymiary w % lub EM. Po prostu zmień podstawowy rozmiar czcionki, wszystko się zmieni. W odróżnieniu od poprzedniego, może po prostu zmienić czcionkę ciała i nie h1 każdym razem albo niech bazowy rozmiar czcionki do ustawień urządzenia i odpoczynku wszystkim em

„Ems” (em): Opcja „em” to skalowalna jednostka. Wartość em jest równa bieżącemu rozmiarowi czcionki, na przykład, jeśli rozmiar czcionki dokumentu wynosi 12 punktów, 1em jest równe 12 punktów. Ems są skalowalne, więc 2em będzie równe 24pt, .5em będzie równe 6pt, itd.
Procent (%): Jednostka procentowa jest bardzo podobna do jednostki "em", z wyjątkiem kilku podstawowych różnic. Przede wszystkim aktualny rozmiar czcionki wynosi 100% (tj. 12pt = 100%). Podczas korzystania z jednostki procentowej tekst jest w pełni skalowalny dla urządzeń mobilnych i dla ułatwienia dostępu.

zobaczyć kyleschaeffer.com/....

CSS3 obsługuje nowe wymiary, które są względem zobaczyć port. Ale to nie działa w android

3.2vw = 3,2% szerokości rzutni
3.2vh = 3,2% wysokości rzutni
3.2vmin = mniejsza z 3.2vw lub 3.2vh
3.2vmax = większe od 3.2vw lub 3.2vh
```
body 
{ 
    font-size: 3.2vw; 
} 
```

zobaczyć css-tricks.com/.... a także spojrzeć na caniuse.com/....

Źródło

2014-02-24 07:41:08 aWebDeveloper

Nie wiem, dlaczego jest to skomplikowane. Zrobiłbym to podstawowe javascript

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

Gdzie 12 oznacza 12 pikseli w rozdzielczości 1280. Ty decydujesz wartość chcesz tutaj

Źródło

2015-05-27 07:40:11 user3334188

Utworzyłem wariant https://stackoverflow.com/a/17845473/189411

którym można ustawić minimalną i maksymalną wielkość tekstu w związku z min i max wielkości pudełka, które chcesz „check” rozmiar. Ponadto możesz sprawdzić rozmiar elementu domowego innego niż pole, w którym chcesz zastosować rozmiar tekstu.

zmienić rozmiar tekstu pomiędzy 19px i 25px na # size-2 elementu, na podstawie 500px i 960px szerokości # wielkości-2 elementu

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

zmienić rozmiar tekstu pomiędzy 13px i 20 pikseli na # size-1 elementu , oparty na 500px i 960px szerokości elementu body

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

kompletny kod istnieją 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'); 
    }); 
});

Źródło

2016-09-06 15:22:31

Wielkość czcionki w stosunku do rozdzielczości ekranu użytkownika?

Odpowiedz

Powiązane problemy