Разве я не должен использовать относительные измерения для любого элемента, если мне нужна фиксированная ширина, идеальный дизайн пикселей?

Question

Разве я не должен использовать какое-либо относительное измерение в CSS для любого элемента, если мне нужна фиксированная ширина, идеальный дизайн пикселей?

было бы лучше использовать px всегда?

Answer 1

Хотя идеальный пиксель - это благородная цель, она также практически невозможна по причинам, перечисленным выше, например, рендеринг шрифтов в разных браузерах и в разных операционных системах. Если вы хотите использовать EM, но при этом у вас есть макет, который вы можете легко измерить, вот простой способ сделать это:

body {
  font-size: 62.5%; /* 1 EM now equals 10px */
}

Браузеры (как правило) имеют размер текста по умолчанию 16 пикселей. установка размера шрифта основного текста на 62,5% приводит к уменьшению этого значения до 10 пикселей, что намного легче вычислить. Если вы хотите, чтобы тег был 14px, вы должны написать:

h1 {
  font-size: 140%;
  /* OR */ font-size: 1.4em;
}

Любой из них будет работать и пройти долгий путь к достижению цели идеального пикселя, но все же даст вам некоторую гибкость.

Answer 2

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

Однако вы никогда не получите дизайн с идеальным пикселем в том, что касается шрифтов.Разные операционные системы имеют разные шрифты и всегда будут небольшие различия между браузерами.Таким образом, вы можете использовать либо px, либо em для размеров шрифта, что бы ни было проще в вашей ситуации.