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

86

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

Пробовал тоже пц и проц. Ничего не работает так, как мне нужно ...

Подскажите, пожалуйста, как действовать дальше.

css measurement баракуда28
источник

Ответы:

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

Вы можете задать его вручную в соответствии с размером экрана. Просто посмотрите на другой размер экрана и добавьте вручную размер шрифта.

Арпит Шривастава
источник
16
Важное примечание: вам нужно добавить это в заголовок HTML. <meta name="viewport" content="width=device-width" /> Также вы можете использовать max-widthвместо max-device-widthдля более «отзывчивого» ощущения.
Sheharyar
@ user65165 Я не понял, что вы пытаетесь сказать?
Arpit Srivastava 01
max-device-width не работает. Когда я настраиваю экран браузера, работает только максимальная ширина.
Ramisa Anjum Aditi
56

Вы можете использовать em, %, px. Но в сочетании с media-queries См. Эту ссылку, чтобы узнать о медиа-запросах. Кроме того , CSS3 имеют некоторые новые значения для калибровки вещи по отношению к текущему размеру окна просмотра: vw, vhи vmin. См. Ссылку об этом.

Милян Пузович
источник
28
vw, vh, vminРок этого ответа.
Фрэнк Леммер
1
Это правильный ответ, учитывая, что единицы просмотра поддерживаются каждым * браузером: caniuse.com/#feat=viewport-units .
cazzer 05
Не забывайvmax
live2
33

Новый способ

Есть несколько способов добиться этого.

CSS3 поддерживает новые размеры относительно порта просмотра. Но в android это не работает.

  1. 3.2vw = 3,2% ширины области просмотра
  2. 3,2vh = 3,2% высоты области просмотра
  3. 3.2vmin = меньше 3.2vw или 3.2vh

  4. 3.2vmax = больше 3.2vw или 3.2vh

    body
{
    font-size: 3.2vw;
}

см. css-tricks.com / .... а также caniuse.com / ....

Старый путь

  1. Использовать медиа-запрос, но требуются размеры шрифта для нескольких точек останова

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

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

  2. Используйте размеры в % или бэр . Просто измените базовый размер шрифта, все изменится. В отличие от предыдущего, вы можете каждый раз просто менять основной шрифт, а не h1, или разрешить базовый размер шрифта по умолчанию для устройства и оставить все в em.

    • «Root Ems» (rem) : «rem» - это масштабируемая единица. 1rem равен размеру шрифта body / html, например, если размер шрифта документа 12pt, 1em равен 12pt. Root Ems масштабируемы по своей природе, поэтому 2em будет равняться 24pt, .5em будет равняться 6pt и т. Д.

    • Процент (%) : Единица процента очень похожа на единицу «em», за исключением нескольких фундаментальных отличий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

см. kyleschaeffer.com / ....

aWebDeveloper
источник
font-size: 3.2vw работал в моем случае. Хотя не уверен в поддержке браузером.
manpikin 02
«Em равно текущему размеру шрифта, например, если размер шрифта документа 12pt, 1em равен 12pt». Фактически, emзависит от размера шрифта контейнера. Это может привести к неожиданному поведению, когда в контейнере также установлен размер шрифта em... Чтобы получить размер относительно шрифта документа, используйте rem.
Stijn de Witt
19

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

  1. Я использую только «em» для определения размеров шрифта.

  2. html установлен размер шрифта 10 пикселей:

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

  3. Я вызываю функцию изменения размера шрифта при готовности документа:

// для этого требуется 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+'%');
}
Элад Зив
источник
интересное решение, неплохое. Я тестировал, я узнал, как я использую, но пока я исправил текст размером 10 пикселей в окнах максимального размера, это нормально? но это? что такое "16" что это? вар fpc = fw * 100/16;
Доменико Монако
5

Не уверен, почему это сложно. Я бы сделал этот базовый javascript

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

Где 12 означает 12 пикселей при разрешении 1280. Вы сами решаете, какое значение вы хотите здесь

пользователь3334188
источник
2

Я создал вариант 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');
    });
});
Доменико Монако
источник
1

Не использовать медиа-запросы - это хорошо, потому что позволяет постепенно масштабировать размер шрифта.

С помощью vw единиц будет регулировать размер шрифта относительно размера порта просмотра.

Прямое преобразование vw единиц измерения в размер шрифта затруднит достижение оптимального уровня как для мобильных разрешений, так и для настольных компьютеров.

Я рекомендую попробовать что-то вроде:

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

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

Итаи Ноам
источник
0 
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

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

</script>

Я надеюсь, это поможет. Я использую эту формулу для своей игры Phase.

Паван Кумар
источник