Начальный масштаб против desktop.css+phone.css+tablet.css?

Question

Я только что обнаружил начальный масштаб мета-атрибута.

Ранее я использовал default.css для определения всех своих стилей и размеров (для шрифтов и элементов), чтобы они хорошо отображались на экранах настольных компьютеров. Тогда я мог бы использовать медиа-запросы или PHP, чтобы включить phone.css или tablet.css, если вы используете телефон или планшет, и это будет корректировать ТОЛЬКО РАЗМЕРЫ для небольших устройств.

Но теперь, когда я осознал концепцию начального масштаба, я должен использовать это вместо того, чтобы управлять размерами элементов?

Очень важное следствие, которое я пытаюсь получить, заключается в следующем... Я использую для определения размеров шрифта с помощью единиц EM (или REM), например:

/*desktop.css*/
html{font-size:62.5%;}
p{font-size:1.2em;}
span {font-size:1em;}

/*phone.css*/
html{font-size:125%;}

/*tablet.css*/
html{font-size:100%;}

Другими словами, мои phone.css и tablet.css только корректируют процентное соотношение размера шрифта для элемента html, а все остальные элементы соответственно масштабируются на всех разных устройствах. В определенной степени, я делаю это с отступами, полями, высотой строк и разметкой букв.

С введением начального масштаба, это означает, что единицы EM/REM не имеют значения для масштабирования размеров шрифта? Мы можем придерживаться гораздо более интуитивно понятных устройств PX? И пусть начальный масштаб выполняет остальную часть работы по масштабированию?

Answer 1

Особенность модуля em в том, что он должен отображаться одинаково для разных устройств и плотности экрана, поскольку фактическая высота определяется клиентом.

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