Изменение размера шрифта в зависимости от разрешения

Я разрабатываю веб-страницу, которая использует разные размеры для разных абзацев, h... и так далее. Я использую em размеры: размер шрифта: 2em;, в качестве примера. Но когда я изменяю разрешение экрана на более низкое, я хочу, чтобы этот размер был меньше.

для этой цели я попробовал этот код:

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

во-первых: это не сработает...
Второе: я думаю, что должен быть более чистый способ сделать это...

Итак, вопрос: как использовать разные размеры для моих шрифтов или как настроить их для разных разрешений?

может кто-нибудь помочь пожалуйста? Спасибо!

14
css html jquery screen-resolution

5 ответов

попробуйте использовать это доказательство концепции CSS:

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

работающего демо на jsFiddle

35

вы хотите использовать медиа-запросы, а не JS. Кроме того, используйте JS для добавления класса в тело, а затем используйте его для назначения того, что вы хотите.

4

вы можете использовать размеры шрифта (em или pt) относительно разрешения экрана, как указал lanzz. Или вы также можете использовать медиа-запросы в своем css-файле в соответствии с "http://www.w3.org/TR/css3-mediaqueries/#width"

@media screen and (min-width: 400px) and (max-width: 700px) { … }

вы можете установить любую минимальную и максимальную ширину.

1

лучшим решением является Типография Размера Видового Экрана

есть много причин. Вот два:

  1. существует такая вещь, как удобная длина строки для чтения текста на экране. Я не хочу пинать осиное гнездо, но, скажем так, около 80 символов. Эти блоки позволяют вам получить его ощупывание идеально, а затем иметь этот опыт масштабирования до любого размера экрана.
  2. они позволяют вам плотно соединить размер отношения, скажем, типографский заголовок и его содержание.

как они работают

одна единица на любом из трех значений составляет 1% от оси просмотра. "Viewport" = = размер окна браузера = = объект окна. Если окно просмотра имеет ширину 40 см, 1vw == 0.4 cm.

для использования с размером шрифта, я думаю, что это одна "буква", которая принимает этот размер, но, как мы знаем, в немоно-разнесенных шрифтах ширина буквы довольно произвольна. Я найду тебя просто нужно настроить вокруг со значениями, чтобы получить его, как вы хотите. Что в основном мы и делаем, верно?

  • 1vw = 1% от ширины окна просмотра
  • 1vh = 1% высоты окна просмотра
  • 1vmin = 1vw или 1vh, какое значение меньше
  • 1vmax = 1vw или 1vh, какое значение больше
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
1

em размеры относительно размера родительского элемента. Вероятно, вы хотите установить размер шрифта в pt единицы измерения (1pt = 1/72 дюйма), которые не зависят от разрешения и предназначены для просмотра одного и того же кажущегося размера в любом разрешении.

0