it-roy-ru.com

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

Я делаю сайт с HTML5 и CSS. Я пытаюсь сделать этот сайт отзывчивым, но я не знаю, почему размер шрифта остается неизменным, когда я изменяю размер окна браузера, даже когда я использую em или percentages, такие как: font-size: XXem или font-size: XX%.

Как я могу изменить размер шрифта?

15
user2804038

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

Например...

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

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

Узнайте больше здесь: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Примечание: вам может понадобиться иметь это в своей голове:

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

Это называется отзывчивым

@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

}
7
San

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

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);
    });
});
2
Space Age Crystal

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

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

Дайте рему выстрел. Работает лучше чем% или em.

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

2
fauverism

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

1
Karuhanga
.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>
1
user3024320

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

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

и с помощью запроса @media и окна просмотра вы объявляете, какой у вас размер на ширину экрана, используя этот запрос СМИ + область просмотра в 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

  }

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

Таким образом, это означает, что ваш CSS-код будет в 6 раз больше адаптирован к размеру.

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

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

1
Reynderke

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

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

0
steve

размер шрифта: 25vmin;

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

0
user4565320