Отзывчивое приложение: какие единицы размера шрифта em против px против pt против процента

Я создаю отзывчивое приложение, предназначенное для настольных компьютеров, планшетов и мобильных телефонов с использованием HTML и CSS, но я не уверен, какой размер шрифта я должен использовать, чтобы шрифт хорошо вписывался в любой размер экрана. Какая разница между em, px, pt и процентами? Что для меня лучше всего подходит?

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

Я был бы благодарен за любую помощь!

ОТВЕТЫ

Ответ 1

Вы можете взглянуть на эту статью: небольшая ссылка.

Обновление: Вот крошечное объяснение того, как это применимо в вашем случае:

  • px: пиксель - это крошечный квадрат (обычно) на дисплее устройства, который может отображать только один цвет за раз. Ваш разрешение экрана определяет количество пикселей, на которых сделан ваш экран/дисплей. Поэтому, когда вы указываете: font-size: 12px;, вы в основном говорите браузеру, что каждая буква должна быть 12 пикселей в высоту (приблизительно - разные буквы немного различаются по высоте, но относительная разница сохраняется).
  • проценты: font-size: 50%; устанавливает размер шрифта вашего элемента на 50% от размера шрифта его родительского элемента.
  • pt: 1pt (точка) - 1/72 дюйма. Установка font-size: 12pt; устанавливает высоту ваших символов на 12/72 дюйма (опять же, разные символы немного отличаются).
  • em: em - ширина буквы "m" в выбранном шрифте, в основном такая же, как и процентная, за исключением того, что 1em - 100% и 1.5em - 150%.

Таким образом, ваш выбор, вероятно, будет px, поскольку он сохранит логические пропорции размера текста для других элементов.

Ответ 2

Различные размеры

  • "Ems" (em): "em" - это масштабируемая единица. Значение em равно текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems являются масштабируемыми по своей природе, поэтому 2em будет равен 24pt,.5em будет равен 6pt и т.д.
  • Процент (%): единица процента похожа на блок "em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.
  • Пиксели (px): Пиксели - это блоки фиксированного размера, которые используются в экранном носителе (то есть для чтения на экране компьютера). Одна проблема с блоком пикселей заключается в том, что он не масштабируется.
  • Баллы (pt): Точки традиционно используются в печатных носителях (все, что должно быть напечатано на бумаге и т.д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели, поскольку они фиксированные и не могут масштабироваться.
  • Единицы просмотрa > : - Это относительно порта представления. Они новы в CSS3
    • 3.2vw = 3.2% ширины окна просмотра
    • 3.2vh = 3.2% высоты окна просмотра
    • 3.2vmin = Меньше 3.2vw или 3.2vh
    • 3.2vmax = больше 3.2vw или 3.2vh

см. kyleschaeffer.com/.... и css -tricks.com/....

Но для достижения отзывчивой опечатки посмотрите fooobar.com/questions/22555/...

Ответ 3

Мне кажется, что лучшие входящие единицы rem и vmin будут задокументированы здесь.

Чтобы справиться со старым браузером, вы можете захотеть, чтобы какой-то откат CSS определил что-то вроде:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

или

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

(кредит Крейг Батлер)

Ответ 4

Попробуйте использовать сочетание px, em и rem.

Крис Койер объясняет в этом сообщении, что с использованием px для вашего документа, rem для ваших модулей (т.е. разделов вашей страницы) и em для текстовых элементов в ваших модулях страница будет масштабироваться чисто.