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

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



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



дайте мне подсказку, как действовать, пожалуйста.

529   8  

8 ответов:

@media screen and (max-device-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-device-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

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

39  
2018-07-13 12:41:19

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

36  
2017-02-11 13:05:21

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

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

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

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

  3. Я вызываю функцию изменения размера шрифта на document-ready:

// для этого требуется 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+'%');
}
17  
2017-02-11 13:06:57

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

использовать media query но требуется размер шрифта для нескольких точек останова 

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

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

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

  1. " Ems " (em): "em" является масштабируемым блок. Em равен текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems масштабируемы по своей природе, поэтому 2em будет равен 24pt .5em будет равно 6pt и т. д..
  2. процентов (%): процентная единица очень похожа на единицу" em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т. е. 12pt = 100%). При использовании единицы процента ваш текст остается полностью масштабируемым для мобильных устройств устройства и для доступности.

см.kyleschaeffer.com/....

CSS3 поддерживает новые размеры, которые относятся к порту просмотра. Но это не работает в android

  1. 3.2 vw = 3.2% ширины видового экрана
  2. 3.2 vh = 3.2% высоты видового экрана
  3. 3.2 vmin = меньше 3.2 vw или 3.2 vh

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

    body
{
    font-size: 3.2vw;
}

см.css-tricks.com/.... а также посмотрите на caniuse.com/....

15  
2014-02-24 09:54:37

вы можете попробовать этот инструмент:http://fittextjs.com/

Я не использовал этот второй инструмент, но он кажется похожим:https://github.com/zachleat/BigText

5  
2012-08-02 15:43:00

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

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

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

3  
2015-05-27 10:40:11

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

где вы можете установить минимальный и максимальный размер текста в отношении min и Max размер коробки, которую вы хотите "проверить" размер. Кроме того, вы можете проверить размер элемента dom отличается от поля, где вы хотите применить размер текста.

вы изменяете размер текста между 19px и 25px на элементе #size-2, основываясь на ширине 500px и 960px элемента #size-2

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

вы изменяете размер текста между 13px и 20px на # size-1 элемент, основанный на 500px и 960px ширина элемента тела

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');
    });
});
2  
2017-05-23 15:34:21

следующий код будет работать.

@media (max-width: <size>em) { <.class> { font-size: <size>em } }

max-width можно заменить на min-width Это используется, чтобы определить, когда этот код будет включаться и выключаться в зависимости от размера экрана.

<.class> - это объект, который вы хотите эффект.

font-size может быть заменен многими другими свойствами CSS.

я рекомендую использовать следующий код, чтобы разрешить @media функции.

em смогите быть заменено с любым другим размером переменная:px % vh vw (etc.)

<meta name="viewport" content="width=device-width, initial-scale=1">

здесь вы можете найти больше применений для @media

0  
2018-03-31 02:34:04

Comments

    Ничего не найдено.
Click here to cancel reply.