Как уменьшить размер шрифта при изменении размера браузера

Для веб-страниц HTML5 я настоятельно рекомендую использовать значения ширины и высоты точки. Они функционируют аналогично%, но имеют размер шрифта, размер которого изменяется с помощью окна.

Например...

.some-paragraph{
    font-size: 5vw;
}

Это установило бы размер шрифта всегда на 5% от текущей ширины видового экрана, даже при повторной калибровке!

Подробнее здесь: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Примечание. Возможно, вам нужно иметь это в своей голове:

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

Он называется Отзывчивый

@media screen and (max-width: 1024px) {
your font  style goes here

}

@media screen and (max-width: 950px) {
 your font  style goes here

}


@media screen and (max-width: 650px) {
 your font  style goes here


}

@media screen and (max-width: 480px) {
 your font  style goes here

}

Вы должны определенно использовать мультимедийные запросы CSS в стиле, основанном на диапазоне коэффициентов экрана и спецификаций, но здесь приведен пример использования как rem единиц, так и jQuery, чтобы уменьшить размер шрифта при изменении размера браузера. Заклинание здесь.

CSS

html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }

JavaScript/JQuery

$(document).ready(function () {
    var holdWidth = $(window).width();
    $(window).on('resize', function () {
        newPercentage = (($(window).width() / holdWidth) * 100) + "%";
        $("html").css("font-size", newPercentage)
    });
});

и здесь пример, усредняющий как ширину, так и высоту для нового процентного размера шрифта:

$(document).ready(function () {
    var holdWidth = $(window).width();
    var holdHeight = $(window).height();
    var holdAverageSize = (holdWidth + holdHeight) / 2;
    $(window).on('resize', function () {
        newAverageSize = ($(window).width() + $(window).height()) / 2;
        newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
        $("html").css("font-size", newPercentage)
        console.log(newPercentage);
    });
});

Проверьте свои медиа-запросы, они должны контролировать размер шрифта, если вы используете отзывчивые методы.

Пример кода поможет.

Сделайте снимок. Работает лучше, чем% или em.

http://snook.ca/archives/html_and_css/font-size-with-rem

ОК... Я думаю, это старый вопрос... но здесь крутая работа вокруг меня натолкнулась. этот парень CSS корректирует размер текста в соответствии с размером окна, но сохраняет его достаточно большим для обеспечения совместимости с мобильными устройствами http://typecast.com/blog/a-more-modern-scale-for-web-typography

вы можете исправить это, используя запрос @media и окно просмотра в своем css, и добавьте этот метатег в свой html:

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

а с помощью запроса и просмотра @media вы объявляете, какой размер у вас есть на ширине экрана, используя этот медиа-запрос + viewport в css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

            // your css for screens between 820 and 920 pixels in width goes here

  }

i в основном используют значение: от 20 до 600, 600-700, 700-820, 820 - 920, 920 - 1200, экран @media и (минимальная ширина: 1200 пикселей) {@viewport {width: 1200px; } (этот последний установит размер для любого экрана шириной более 1200 пикселей, поэтому ваш код для самой большой версии будет идти здесь}

Итак, это означает, что у вас будет 6-кратный код, который будет адаптирован к размеру.

Это называется адаптивным или отзывчивым дизайном и довольно легко сделать

Для получения дополнительной информации вы можете проверить это http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

font-size: 25vmin;

Это был очень хороший размер шрифта как по высоте, так и по ширине.
Вам не нужно ничего в голове.

.text {
    font-size: 50px;
}


@media only screen 
and (min-width : 300px)
and (max-width : 500px) {

   .text {
    font-size: 20px;
   }

}

    @media only screen 
    and (min-width : 500px)
    and (max-width : 800px) {

       .text {
        font-size: 30px;
       }

    }

</style>


<div class="text">Test Text</div>

Как вы определяете свой базовый размер шрифта (против ваших тегов html или body в вашем файле CSS)? Если вы установите это значение на пиксель (или другую фиксированную меру) или наследуете размер шрифта браузера по умолчанию, ваши проценты или значения em всегда будут составлять процент от этих значений по умолчанию.

Наиболее распространенный подход к созданию сайтов с реагированием - это сделать "первый мобильный" подход, при котором ваша таблица стилей по умолчанию обрабатывает базовый стиль для вашего сайта на небольшом экране, а затем использует мультимедийные запросы в CSS для настройки стилей в качестве размера экрана увеличивается. Используете ли вы какие-либо медиа-запросы/контрольные точки в настоящее время?