Что происходит, когда пользователь устанавливает размер шрифта браузера?

Question

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

• корневой элемент html font-size, указанный в CSS?Это масштабирует или отменяет это?
• единицы em, px, rem,%?
• как насчет других единиц, таких как vh, vw, vmin, vmax для тех, кто пытается сделать текучую типографику?
• как это повлияет calc()?
• То же самое поведение для мобильных устройств?

Примечания, которые еще не являются полным ответом:

Однако, ни одно из нижеприведенного не относится к спецификациям, а является просто набором конкретных поведений.

• Из моегособственные эксперименты, установка font-size для html с% действительно масштабируется, когда пользователь изменяет размер шрифта браузера.
• Этот ответ содержит некоторую информацию, похоже, что при html установлено, px не корректируется, но em, rem,% do.
• Этот сайт имеет действительно хорошую информацию, но это всего лишь десятилетиестарый и неуверенный, является ли упомянутое поведение только из-за ошибок браузера, или это разработано таким образом.
• Есть много неаккуратного языка, который peopЛе использовать, когда говорим об этом.Например, люди будут говорить о «базовом размере шрифта», но не будут указывать, является ли это шрифт, указанный в элементе root / html, настройках браузера или их комбинации.Я уверен, что это понятно тем, кто уже знает взаимодействие, но мне все еще не ясны концепции.

Answer 1

Определяемый пользователем размер шрифта определяет базовый размер шрифта корневого элемента html.Начальное значение font-size, как указано в CSS, равно medium, что во всех браузерах настольных компьютеров соответствует этому определяемому пользователем размеру (кроме Microsoft Edge, который использует Windows DPI и настройки доступности, а не имеет свои собственные).Мобильные браузеры, к сожалению, не удовлетворяют общесистемным предпочтениям, типичным для мобильных устройств.По крайней мере, ни один из Safari на iOS, Internet Explorer на Windows Phone 8.1 или Microsoft Edge на Windows 10 Mobile не делает.

Все остальные значения ключевых слов свойства font-size, определенные здесь , масштабируютсядо этого размера, поэтому, если пользовательский размер равен 20px, medium соответствует 20px, а small почти наверняка будет соответствовать размеру, меньшему 20px.

Медиа-запросы rems и ems вычисляются напрямуюэтого определенного пользователем размера, независимо от указанного свойства font-size корневого элемента.Каждое из следующих мультимедийных выражений:

(max-width: 30rem)
(max-width: 30em)

эквивалентно (max-width: 480px), когда пользовательский размер равен 16px, и (max-width: 600px), когда пользовательский размер равен 20px.

С другой стороны, правила правил стиля рассчитываются исходя из указанного font-size корневого элемента.Следующее правило:

:root { font-size: 50%; }

делает 1rem в правиле стиля эквивалентным 8px, если пользовательский размер равен 16px, и 10px, если пользовательский размер равен 20px.

Правило стиляЭмс и проценты всегда рассчитываются относительно элементов-предков, поэтому их поведение не меняется.Если размер шрифта body объявлен в ems или процентах, то он будет основан, например, на размере шрифта html (его родитель).И так далее и тому подобное для всех его потомков, которые не указывают какой-либо другой размер.

Единица px соответствует пикселю CSS, и поэтому на ее метрики никогда не влияет размер шрифта, определенный пользователем.

Поведение единиц просмотра и calc() не меняется, поскольку ни одна из этих вещей не зависит от размера шрифта элемента.Как следует из их названия, единицы размера окна просмотра масштабируются до размера окна просмотра.

Наиболее заметный общий эффект, который это может оказать на макет, размеры которого всего (включая ширину и высоту блоков) вРемс и Эмс, это то, что пользователь может масштабировать весь макет, просто изменив свой предпочтительный размер шрифта.Я не знаю, насколько это полезно, особенно когда масштабирование имеет значение.

Итак, чтобы ваша копия могла соответствовать предпочтительному размеру шрифта пользователя, не заставляя его увеличивать, укажите весь свой шрифт.Размеры в Римах или EMS, где это возможно.Особенно не указывайте размер шрифта в пикселях на html, так как это полностью переопределит предпочтение.Вам не обязательно указывать ширину и высоту в rems или ems - это действительно зависит от вашего макета.Не все макеты жидкостей хорошо масштабируются при разных размерах.На самом деле наиболее важным аспектом этого является размер текста, поскольку эта функция предназначена для масштабирования текста для улучшения читабельности.