Размер шрифта и соотношение устройств к пикселям
Допустим, у меня по умолчанию установлен размер шрифта 16px (это должно быть избыточно, так как это по умолчанию в большинстве браузеров):
Для краткости мой сайт содержит коробку размером 10em x 10em.
body, html {font-size: 16px; }.box {border: 1px green solid; цвет фона: зеленый; ширина:10em; высота:10em;
}Мой сайт уже реагирует на min-width медиа-запросы для конкретных точек останова, нацеленных на значения em (36, 62 и 85em).
Единственное, что делает мой сайт - это изменяет ширину и цвет коробки.
@media (min-width: 36em) {.box {
ширина: 36em;
граница: 1px красная сплошная;
фон-цвет: красный;
}
}
@media (min-width:62em) {
.box {
ширина: 62 мм;
граница: 1px синяя сплошная;
цвет фона: синий;
}
}
@media (min-width:85em) {
.box {
ширина: 85 мкм;
граница: 1px оранжевое твердое вещество;
фон-цвет: оранжевый;
}
}Теперь предположим, что у меня есть какое-то устройство с разрешением 1440x900, где браузеры решают, что плотность пикселей устройства по умолчанию составляет 2dppx. В результате все выглядит намного больше, чем должно быть. И мне это не нравится.
Но решение должно быть простым, верно? Просто добавьте медиазапрос при запуске для плотности пикселей 2dppx и, поскольку это в два раза больше пикселей, я просто уменьшу размер шрифта вдвое... это должно работать, верно?
И так как я использую "em" для всего, то, изменяя размер шрифта наполовину, я автоматически уменьшаю размер всего, что "em", - наполовину... верно?
@media (минимальное разрешение: 2dppx) {
body, html {
размер шрифта: 50%;
}
}Ну, я обнаружил, что это не работает, как я думал, что это будет... Я пытался найти ответы в Google, но не нашел ничего релевантного, я подозреваю, что неправильно понимаю, как работают размеры шрифтов, ems и плотность пикселей...
Уменьшение размера шрифта на 50% уменьшает размер шрифта более чем вдвое. Оригинальный размер 16px, но размер шрифта: 50%; в результате размер шрифта значительно меньше размера шрифта: 8 пикселей... Проверено в Firefox и Chrome. Кто-нибудь знает, почему это?
Когда я устанавливаю размер шрифта:8px; в медиа-запросе для 2dppx медиа-запросы для min-width:36em, 62em и 85em не запускаются, как я ожидал, по крайней мере, когда я меняю layout.css.devPixelsPerPx в Firefox. Минимальная ширина в медиа-запросе ведет себя так, как будто размер шрифта все еще равен 16px, хотя он изменяется с помощью медиа-запроса dppx. Протестировано в Firefox и Chrome. Кто-нибудь знает, почему это?
ОБНОВИТЬ
Похоже, медиа-запросы загружаются в контексте 1dppx, не важно, используете ли вы "em", кажется, что они кэшируются при загрузке, а значения, такие как min-width, фиксируются в первом значении и даже при изменении базового размера шрифта. в другом медиа-запросе другие запросы не обновляются.
Единственное решение, которое я могу придумать сейчас, - это умножить все медиазапросы. Один медиа-запрос для значения px в контексте 1 dppx и другой медиа-запрос для значения px в контексте 2 dppx (что составляет 50% от первого значения).
1 ответ
Благодаря господину Листеру в комментариях я узнал, что это:
@media (минимальное разрешение: 2dppx) {
body, html {
размер шрифта: 50%;
}
}... это не то, что я намеревался сделать. Правило 50% работает для <html> тег И для <body> тег. Результирующий размер шрифта составляет не 8px в теле, а 4px, потому что 50% в html - 8px, а еще 50% во вложенном теге body - 4px.
То, что я намеревался сделать, было этим:
@media (минимальное разрешение: 2dppx) {
html {
размер шрифта: 50%;
}
}Проблема размера шрифта решена.
Для медиа-запроса: я обнаружил, что размеры в запросах @media игнорируют плотность пикселей, а размеры в теле правила CSS - нет. Поскольку я использую размеры "em" и SASS, я могу просто заменить все запросы @media следующим миксином (пример с 2dppx):
@mixin media-min-width ($ min-width) {
@media (min-width: $ min-width), (min-width: $ min-width / 2) и (минимальное разрешение: 2dppx) {
@content;
}
}