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

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

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

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

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

 SVS13 июн. 2012 г., 12:17
Я предлагаю использовать медиа-запросы CSS.
 AleksanderKseniya13 июн. 2012 г., 12:27
Обычно эта проблема возникает при использованииpx вместоem или же% при измерении размеров. Вы пробовали проценты (для правильного файла CSS, без разницы между размерами экрана)?
 slash19713 июн. 2012 г., 12:16
Я предлагаю использовать разные таблицы стилей .. это было бы чище
 Quentin13 июн. 2012 г., 12:19
Разрешения экрана обычно уменьшаются с размером экрана. Уменьшение размера шрифта делает вещи менее и менее читабельными. Придерживаться1em для основного текста.

Ответы на вопрос(5)

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

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

Решение Вопроса
Try to use this concept proof 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%; }
}
Working demo on jsFiddle
 19 авг. 2013 г., 10:01
Это было действительно полезно для меня. Спасибо!
 15 мая 2014 г., 11:12
+1 за избежание ненужного скрипта
 Sonhja13 июн. 2012 г., 13:09
Ок, попробовал. Это тот, который работает ... Спасибо @ Владимир!
 13 июн. 2012 г., 13:10
@ Соня, я рад, что это работает для тебя
 07 сент. 2015 г., 11:33
Я просто пытаюсь понять. Что не так с использованиемvw? если мы используемvw нам даже не нужно считать медиа запросы правильными?

Viewport Sized Typography

There are many reasons. Here are two:

There is a such thing as a comfortable line length for reading text on screens. I don't want to kick a hornet's nest, but let's say its around 80 characters. These units allow you to get it feeling perfect and then have that experience scale to any size screen. They allow you to tightly couple the size relationship of, say, a typographic header and the content it goes with.

How they work

Одна единица на любом из трех значений составляет 1% от оси области просмотра. & Quot; ВЭкран & Quot; == размер окна браузера == объект окна. Если ширина области просмотра составляет 40 см, 1vw == 0,4 см.

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

1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
 15 апр. 2016 г., 09:07
Это делает текст неудобно маленьким на маленьких экранах и слишком большим на больших. Я думаю, что лучшим способом может быть масштабирование с меньшим линейным коэффициентом, чем 1.

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

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

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

 Sonhja13 июн. 2012 г., 13:07
Что если я хочу изменить существующее свойство css? Я имею в виду: у меня есть идентификатор, который имеет свои свойства, но, как вы говорите, используя этот метод, я хочу добавить размер шрифта. Является ли это возможным?
 13 июн. 2012 г., 13:18
Я не уверен, что правильно вас понял, но, если вы говорите об изменении размера шрифта для конкретного разрешения, вы можете сделать это с помощью @media screen и (min-width: 400px) и (max-width: 700px) { размер шрифта: 15pt; } и если вы говорите об изменении минимальной ширины & quot; до "font-size", это невозможно. Вы можете указать только "ширину, высоту, ширину устройства, высоту устройства, ориентацию, соотношение сторон, соотношение сторон устройства, цвет, разрешение"; (пару больше) только.

Ваш ответ на вопрос