Как всегда иметь страницу шириной 40-70 символов? scren, мобильный, печать

Question

Как сбалансировать приличный размер шрифта независимо от носителя (небольшой вертикальный экран телефона или печать всей страницы) и удобного 40–80 символов в строках, используя современные лучшие практики CSS?

Я думаю, что знаю детализацию для обычных экранов, установил размер шрифта тела в некоторый процент, пометил ваш основной элемент контента шириной 70em и минимальной шириной 40em...

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

Все мои попытки поиска приводят меня к (сейчас) бесполезным дискуссиям 2002–2011 годов о преимуществах [em,pixel,%,pt] над другими...

Answer 1

body {
  min-width: 16em;
  min-width: 40ch;
  max-width: 28em;
  max-width: 70ch;
}

Использовать ch единицы для "ширины символа", и подкрепите его настройкой в em единиц, с числовым значением, которое составляет около 40% от желаемого количества символов.

em единица означает размер шрифта. Для текстов латинскими буквами это составляет около 40% средней ширины символов, может быть, немного больше.

ch единица означает ширину цифры 0. Как правило, это наилучшее из доступных приближений для "средней ширины символов" в CSS. Он поддерживается современными браузерами, но для менее современных браузеров сначала установите ширину в em единицы.

Это отвечает на вопрос в заголовке вашего сообщения. Тело сообщения является расплывчатым и не ставит вопрос, который можно было бы решить конструктивно.

Answer 2

Установка ширины страницы относительно размера символа будет иметь смысл только с монотипным шрифтом. Рассмотрим эти две строки "iiiiiiiiii" и "WWWWWWWWWW" - обе состоят из 10 символов, но явно требуют контейнер различной ширины!

Вы могли бы поиграть с ex/em/ch подразделений, но они не дадут вам полный контроль, чтобы выполнить то, что вы пытаетесь сделать. Также: ch даже не полностью поддерживается!

Возня образец