можно заменить размер шрифта браузера по умолчанию в медиа-запросов, с помощью эмс?


1em16pxnot true1emvalue of your browser font-size which is most of the time 16px

Многие люди думают, что = . Это , = . В то время как это не часто, чтобы изменить размер шрифта браузера по умолчанию, все равно легко изменить настройки.

emHTML

Учитывая эту ситуацию, он по-прежнему легко перезаписать значение с точки зрения элементом, поскольку он использует шрифт-размер верхнего элемента. Например:

html {     font-size: 20px; }
1em20px

Этот простой стиль будет каскадом вниз к остальной части документа и будет .

media queriesem

Проблема, когда с помощью CSS с стоимость, похоже, застрял на уровне стиля браузера, а не верхнего уровня элемента. Например:

@media screen and (min-width: 2em) {    ...some style...}
20px2em40px2 * browser default font-size24px2em48px

Если рассмотреть предыдущий пример с HTML перезаписи, можно ожидать, что в этом контексте ссылается на элемент верхнего уровня и будет иметь значение . Но это не будет (например, 16px и, так 36px). Еще хуже, если вы настроили свой браузер шрифт-размер , будет фактически иметь значение .

Есть ли способы обойти это? Основная проблема заключается в том, что трудно предсказать стиле медиа-запросы, если мы не можем заменить размер шрифта браузера по умолчанию. Это значение становится непредсказуемым, а значит ваш стиль тоже будет.

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

Подводя итог, я ищу либо:

  • A way to overwrite the default browser font-size value when using media queries.
  • A simple way to get the default browser font-size.