Неточные единицы rem в Opera12 и IE9
Хотя я не новичок в идее отзывчивого дизайна, я испытал очень хлопотную вещь...
Я решил полностью перейти к единицам rem
, но я все еще придерживаюсь правила 62.5%
(я использовал его с em
).
Итак, для стартеров:
html {
font-size: 62.5%;
}
Я предполагаю, что 1rem = 10px (я знаю, что это не всегда верно, но эй, это для меня немного облегчить математику, для браузера это все еще относительно правильно?)
Ужас начинается с Opera ( 12.12 и Linux, и версия win, где размер шрифта по умолчанию установлен на 14px
и 16px
соответственно).
header nav ul li a span {
padding: 1.8rem 2.7rem 3rem 0;
font-family: 'sawasdeebold', sans-serif;
font-size: 2rem;
line-height: 3rem;
letter-spacing: -0.3rem;
display: block;
}
Как видите, часть моей навигации позволяет сказать "идеальный пиксель" благодаря использованию единиц rem
. Под linux-страницей немного уже (что без проблем шрифт меньше, поэтому 1rem
меньше пикселей). Однако все в nav
плохо масштабируется, если размер по умолчанию изменен на что-то еще, чем 14px
... Под Windows то же самое верно для 16px
... Вся идея масштабирования просто не работает. Мне не нужен каждый пиксель, чтобы соответствовать, но он выглядит уродливым...
![Navigation in rems]()
Аналогичная проблема возникает при IE9, но на этот раз это логотип, где:
header h1 a {
margin: 1.8rem 0 0 1.6rem;
width: 46.2rem;
height: 10.1rem;
background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
background-size: 46.2rem 20.2rem;
text-indent: -5000px;
display: block;
}
header h1 a:hover {
background-position: 0 -10.1rem;
}
Несмотря на то, что я установил высоту логотипа и точный размер его фона, при наведении фоном положение 1px
слишком низкое...
Помимо этих проблем у меня есть один общий вопрос.
Возможно ли создать "идеальные" пиксельные макеты с rem
единицами?
Я даже не дотронулся до медиа-запросов, и я хочу знать, стоит ли мне моих усилий...
БОЛЬШИЕ СПАСИБО парни!
Ответы
Ответ 1
Итак... Я переключился на em
untits. За исключением немногих (незначительных) сбоев в IE9 (которые хорошо известны подпиксельные проблемы) все идеально подходит в браузерах ВСЕ. Более того, как и раньше rem
, у меня нет проблем с media queries
, которые также используют единицы em
. К сожалению, кажется, что единицы rem
еще недостаточно стабильны, чтобы использовать их в существующих веб-браузерах. Дело закрыто...
Ответ 2
Если вы хотите продолжить использовать 1rem = 10px, вы пробовали -
html {
font-size: 10px;
}
вместо
html {
font-size: 62.5%;
}
это разрешает проблему?