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

Я разрабатываю веб-страницу, которая использует разные размеры для разных абзацев, h... и так далее. Я использую em размеры: font-size: 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>

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

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

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

Ответы

Ответ 1

Попробуйте использовать это доказательство 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%; }
}

Работа demo on jsFiddle

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

Лучшее решение - Типография с видовым пространством

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

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

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

Один блок по любому из трех значений составляет 1% от оси окна просмотра. "Viewport" == размер окна браузера == window object. Если видовой экран шириной 40 см, 1vw = 0,4 см.

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

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

Ответ 5

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