Размер шрифта относительно разрешения экрана пользователя?

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,2vh = 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;
   }
}

Используйте размеры в % или бэр . Просто измените базовый размер шрифта, все изменится. В отличие от предыдущего, вы можете каждый раз просто менять основной шрифт, а не h1, или разрешить базовый размер шрифта по умолчанию для устройства и оставить все в em.
- «Root Ems» (rem) : «rem» - это масштабируемая единица. 1rem равен размеру шрифта body / html, например, если размер шрифта документа 12pt, 1em равен 12pt. Root 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 на основе ширины от 500 до 960 пикселей элемента # 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.