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

85

Mam płynną stronę internetową, a menu zajmuje 20% szerokości. Chcę, aby rozmiar czcionki w menu był odpowiednio mierzony, aby zawsze pasował do szerokości pola i nigdy nie był zawijany do następnego wiersza. Myślałem o użyciu „em” jako jednostki, ale jest to zależne od rozmiaru czcionki przeglądarki, więc kiedy zmieniam rozdzielczość, rozmiar czcionki pozostaje taki sam.

Próbowałem też pkt. I proc. Nic nie działa tak, jak tego potrzebuję ...

Proszę, daj mi wskazówkę, jak postępować.

css measurement barakuda28
źródło

Odpowiedzi:

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

Możesz nadać to ręcznie w zależności od rozmiaru ekranu ekranu, wystarczy spojrzeć na inny rozmiar ekranu i ręcznie dodać rozmiar czcionki.

Arpit Srivastava
źródło
16
Ważna uwaga: musisz dodać to do swojej głowy html. <meta name="viewport" content="width=device-width" /> Możesz także użyć max-widthzamiast, max-device-widthaby uzyskać bardziej „responsywny” efekt.
Sheharyar
@ user65165 Nie rozumiem, co próbujesz powiedzieć?
Arpit Srivastava
max-device-width to nie działa. Gdy dostosowuję ekran przeglądarki, działa tylko maksymalna szerokość.
Ramisa Anjum Aditi
54

Można użyć em, %, px. Ale w połączeniu z media-queries Zobacz ten link, aby dowiedzieć się więcej o zapytaniach o media. Ponadto, CSS3 jakieś nowe wartości wielkości rzeczy w stosunku do aktualnego rozmiaru rzutni: vw, vh, i vmin. Zobacz link o tym.

Miljan Puzović
źródło
28
vw, vh, vminRock ten odpowiedź.
Frank Lämmer
1
To jest teraz poprawna odpowiedź, biorąc pod uwagę, że jednostki widoku są obsługiwane przez każdą * przeglądarkę: caniuse.com/#feat=viewport-units .
cazzer
nie zapomnijvmax
żywo 2
32

Nowy sposób

Można to osiągnąć na kilka sposobów.

CSS3 obsługuje nowe wymiary, które są związane z portem widoku. Ale to nie działa w systemie Android.

  1. 3,2vw = 3,2% szerokości obszaru roboczego
  2. 3,2vh = 3,2% wysokości widocznego obszaru
  3. 3,2 vmin = mniejszy z 3,2 vw lub 3,2 vh

  4. 3,2 vmax = większe 3,2 vw lub 3,2 vh

    body
{
    font-size: 3.2vw;
}

zobacz css-tricks.com / .... a także zajrzyj na caniuse.com / ....

Stara droga

  1. Użyj zapytania o media, ale wymaga rozmiarów czcionek dla kilku punktów przerwania

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

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

  2. Użyj wymiarów w % lub rem . Wystarczy zmienić podstawowy rozmiar czcionki, wszystko się zmieni. W przeciwieństwie do poprzedniego, możesz po prostu zmienić czcionkę główną, a nie h1 za każdym razem, lub pozostawić podstawowy rozmiar czcionki na domyślny dla urządzenia i spocząć w nim.

    • „Root Ems” (rem) : „Rem” to jednostka skalowalna. 1rem jest równy rozmiarowi czcionki body / html, na przykład jeśli rozmiar czcionki dokumentu to 12pt, 1em jest równe 12pt. Root Ems są z natury skalowalne, więc 2em to 24 punkty, 0,5em to 6 punktów itd.

    • Procent (%) : Jednostka procentowa jest podobna do jednostki „em”, z wyjątkiem kilku podstawowych różnic. Przede wszystkim aktualny rozmiar czcionki wynosi 100% (tj. 12 pkt = 100%). Używając jednostki procentowej, tekst pozostaje w pełni skalowalny pod kątem urządzeń mobilnych i ułatwień dostępu.

patrz kyleschaeffer.com / ....

aWebDeveloper
źródło
font-size: 3.2vw działało w moim przypadku. Chociaż nie jestem pewien co do obsługi przeglądarki.
manpikin
„Em jest równy aktualnemu rozmiarowi czcionki, na przykład jeśli rozmiar czcionki dokumentu to 12 punktów, 1 em jest równy 12 punktom”. Właściwie emodnosi się do rozmiaru czcionki kontenera. Może to prowadzić do nieoczekiwanego zachowania, gdy kontener ma również ustawiony rozmiar czcionki em... Aby uzyskać rozmiar w stosunku do czcionki dokumentu, użyj rem.
Stijn de Witt
19

Opracowałem fajne rozwiązanie JS - które jest odpowiednie dla całkowicie responsywnego HTML (czyli HTML zbudowanego z procentami)

  1. Używam tylko „em” do definiowania rozmiarów czcionek.

  2. html rozmiar czcionki jest ustawiony na 10 pikseli:

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

  3. Wzywam funkcję zmiany rozmiaru czcionki w dokumencie gotowym do użycia:

// to wymaga 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+'%');
}
Elad Ziv
źródło
ciekawe rozwiązanie, nie jest złe. Przetestowałem, nauczyłem się, robiąc, jak używam, ale poprawiłem to na tekście o rozmiarze 10px w oknach o maksymalnym rozmiarze, w porządku? ale to? co to jest „16” co to jest? var fpc = fw * 100/16;
Domenico Monaco
5

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

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

Gdzie 12 oznacza 12 pikseli przy rozdzielczości 1280. Ty decydujesz, jaką wartość chcesz tutaj

user3334188
źródło
2

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

gdzie możesz ustawić minimalny i maksymalny rozmiar tekstu w stosunku do minimalnego i maksymalnego rozmiaru pola, które chcesz "sprawdzić". Ponadto możesz sprawdzić rozmiar elementu dom inny niż pole, w którym chcesz zastosować rozmiar tekstu.

Zmieniasz rozmiar tekstu między 19 a 25 pikseli w elemencie # size-2, na podstawie szerokości 500 pikseli i 960 pikseli elementu # size-2

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

Zmieniasz rozmiar tekstu między 13 a 20 pikseli w elemencie # size-1, na podstawie szerokości 500 i 960 pikseli elementu body

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

cały kod jest tam 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');
    });
});
Domenico Monaco
źródło
1

Nie używanie zapytań o media jest przyjemne, ponieważ umożliwia stopniowe skalowanie rozmiaru czcionki.

Użycie vwjednostek spowoduje dostosowanie rozmiaru czcionki do rozmiaru portu widoku.

Bezpośrednia konwersja vwjednostek na rozmiar czcionki utrudni znalezienie idealnego miejsca zarówno dla rozdzielczości mobilnych, jak i stacjonarnych.

Polecam spróbować czegoś takiego:

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

Kredyt: CSS In Depth

Itai Noam
źródło
0 
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

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

</script>

Mam nadzieję, że to pomoże. Używam tego wzoru w mojej grze fazowej.

pavan kumar
źródło