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

Question 1

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

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

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.

Question 3

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.

Question 4

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.

3,2vw = 3,2% szerokości obszaru roboczego
3,2vh = 3,2% wysokości widocznego obszaru
3,2 vmin = mniejszy z 3,2 vw lub 3,2 vh
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

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

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

Question 5

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

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

html rozmiar czcionki jest ustawiony na 10 pikseli:

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

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

Question 6

Możesz wypróbować to narzędzie: http://fittextjs.com/

Nie korzystałem z tego drugiego narzędzia, ale wydaje się podobne: https://github.com/zachleat/BigText

Question 7

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

Question 8

To zadziałało dla mnie:

body {

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

}

Szczegółowo wyjaśniono tutaj: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

Question 9

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

Question 10

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

Question 11

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