Хотя я не новичок в идее отзывчивого дизайна, я испытал очень хлопотную вещь...
Я решил полностью перейти к единицам 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... Вся идея масштабирования просто не работает. Мне не нужен каждый пиксель, чтобы соответствовать, но он выглядит уродливым...
Аналогичная проблема возникает при 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 единицами?
Я даже не дотронулся до медиа-запросов, и я хочу знать, стоит ли мне моих усилий...
БОЛЬШИЕ СПАСИБО парни!
