как изменить размер шрифта пропорционально размеру окна в CSS3 или javascript

Я делаю некоторые веб-приложения и у меня есть некоторые проблемы с размер шрифта. Как изменить размер шрифта пропорционально размеру изменения окна в CSS3 или javascript?

6
css css3 html html5 javascript

4 ответов

У вас есть 3 способа сделать это:

  1. С помощью http://fittextjs.com/, но страницы могут начать медленнее
  2. использование медиа-запросов
  3. использование ems

теперь, это зависит от того, что вы хотите, чтобы быть вашим конечным результатом. Я бы выбрал вариант № 3.

3

идеальный способ сделать это с помощью vw единица измерения, которая определяется как 1 / 100th из ширина просмотра (отсюда и название). Так, например, если вы хотите, чтобы ваш текст был 4,5% от ширины браузера в любое время, вы можете использовать размер:

font-size: 4.5vw;

и теоретически, это должно сработать. К сожалению, вы обнаружите, что он работает не совсем так, как ожидалось: в браузерах WebKit есть ошибка (по крайней мере), где значение размера шрифта не live-обновление (хотя и для всех остальных измерений). Вам нужно вызвать перекраску, чтобы изменить размер шрифта, что можно сделать, обновив z-index свойство из JavaScript:

window.addEventListener('resize', function(){
    document.getElementById('myEl').style.zIndex = '1';
}, false);

это может создать немного прерывистости, но это означает, что вам не нужно вычислять какие-либо фактические размеры в JavaScript, и вам не нужно использовать "ступенчатые" размеры, как с медиа-запросами.

21

установите базовый размер шрифта (тот, который вы определяете для своего body элемент в css) в px затем везде в остальной части вашей страницы установите размеры шрифта относительно этого, используя emunit, то вы можете использовать медиа-запросы, чтобы изменить размер шрифта всех ваших страниц, просто изменив базовый шрифт, что-то вроде этого:

body {
  font-size: 15px;
}
@media (max-width: 1000px) {
  body { font-size: 1.3em; }
}
@media (max-width: 500px) {
  body { font-size: 1.1; }
}
7

идеальный способ сделать это-объединить между запросами размера шрифта VW и @media. Причины:

1) em для себя не будет масштабироваться по размеру окна

2) vm для себя будет слишком мал для разрешений / экранов ниже 800px.

таким образом, правильный способ достичь этого:

  • определите класс-prop-текст с VM=1.0 для желаемой ширины экрана
  • добавить медиа-запросы, чтобы соответствовать размеру шрифта с желаемым ниже сетки разрешения.

для моей отзывчивой сетки (которая устанавливает столбец 1/2 для 100% ширины ниже ширины 768px) это выглядит так:

<style>
    .prop-text{font-size:1.0vw}
    @media (max-width : 768px) {
    .prop-text{font-size:2.0vw}
    }
    /*other media queries here - fit font size to smartphone resolutions */
</style>

<div class="prop-text">your text is here</div>
7