Розмір шрифту щодо роздільної здатності екрана користувача?

Question 1

У мене є веб-сайт з гнучким вмістом, і меню становить 20% його ширини. Я хочу, щоб розмір шрифту в меню вимірювався належним чином, щоб він завжди відповідав ширині поля та ніколи не переносився на наступний рядок. Я думав використовувати "em" як одиницю, але це відносно розміру шрифту браузера, тому, коли я змінюю роздільну здатність, розмір шрифту залишається незмінним.

Спробував також бали та відсотки. Нічого не працює, як мені це потрібно ...

Будь ласка, дайте мені підказку про те, як діяти далі.

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

Ви можете вказати його вручну залежно від розміру екрана. Просто подивіться на інший розмір екрана та додайте вручну розмір шрифту.

Question 3

Ви можете використовувати em, %, px. Але в поєднанні з media-queries Див. Це посилання, щоб дізнатись про медіа-запити. Крім того , CSS3 мають деякі нові значення для калібрування речі по відношенню до поточного розміру вікна перегляду: vw, vhі vmin. Дивіться посилання про це.

Question 4

Новий шлях

Є кілька способів досягти цього.

CSS3 підтримує нові розміри, що відносно порту перегляду. Але це не працює в android.

3.2vw = 3.2% ширини області перегляду
3,2 vh = 3,2% висоти області перегляду
3.2vmin = менший на 3.2vw або 3.2vh
3.2vmax = більший на 3.2vw або 3.2vh
```
body
{
    font-size: 3.2vw;
}
```

див. css-tricks.com / .... а також подивіться на caniuse.com / ....

Старий Шлях

Використовуйте медіа-запит, але потрібні розміри шрифту для кількох точок зупинки

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

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

Використовуйте розміри у % або rem . Просто змініть базовий розмір шрифту, і все зміниться. На відміну від попереднього, ви можете просто змінити шрифт тіла, а не h1 щоразу, або дозволити розмір базового шрифту за замовчуванням для пристрою та відпочивати все в них.
- “Root Ems” (rem) : “rem” - це масштабована одиниця. 1rem дорівнює розміру шрифту тіла / html, наприклад, якщо розмір шрифту документа 12pt, 1em дорівнює 12pt. Кореневі Ems мають масштабований характер, тому 2em дорівнює 24pt, .5em дорівнює 6pt тощо.
- Відсоток (%) : Одиниця відсотка дуже нагадує одиницю “em”, за винятком кількох принципових відмінностей. Перш за все, поточний розмір шрифту дорівнює 100% (тобто 12pt = 100%). Використовуючи одиницю відсотка, ваш текст залишається повністю масштабованим для мобільних пристроїв та доступності.

див. kyleschaeffer.com / ....

Question 5

Я розробив гарне рішення JS, яке підходить для повністю адаптивного HTML (тобто HTML, побудованого з відсотками)

Я використовую лише "em" для визначення розміру шрифту.
Розмір шрифту html встановлено 10 пікселів:
```
html {
  font-size: 100%;
  font-size: 62.5%;
}
```
Я викликаю функцію зміни розміру шрифту в готовому до документа:

// для цього потрібен 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

Ви можете спробувати цей інструмент: http://fittextjs.com/

Я не використовував цей другий інструмент, але він схожий: https://github.com/zachleat/BigText

Question 7

Не знаю, чому це складно. Я б зробив цей базовий javascript

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

Де 12 означає 12 пікселів із роздільною здатністю 1280. Ви вирішуєте, яке значення ви хочете тут

Question 8

Це працювало для мене:

body {

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

}

Детально пояснено тут: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

Question 9

Я створив варіант https://stackoverflow.com/a/17845473/189411

де ви можете встановити мінімальний та максимальний розмір тексту щодо мінімального та максимального розміру вікна, який потрібно "перевірити". Крім того, ви можете перевірити розмір елемента dom, який відрізняється від поля, де ви хочете застосувати розмір тексту.

Ви змінюєте розмір тексту від 19 пікселів до 25 пікселів для елемента # size-2 на основі ширини 500px та 960px елемента # size-2

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

Ви змінюєте розмір тексту від 13 пікселів до 20 пікселів для елемента # size-1 на основі ширини елемента тіла 500 пікселів та 960 пікселів

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

повний код є 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

Не використовувати медіа-запити приємно, оскільки це дозволяє поступово масштабувати розмір шрифту.

Використання vwодиниць регулює розмір шрифту щодо розміру порту перегляду.

Безпосередньо перетворення vw одиниць у розмір шрифту ускладнить досягнення найкращого місця як для мобільних роздільних здатностей, так і для робочого столу.

Я рекомендую спробувати щось на зразок:

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

Кредит: CSS у глибину

Question 11

<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

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

</script>

Сподіваюся, це допоможе. Я використовую цю формулу для своєї гри Phase.