какую единицу я должен использовать в CSS при разработке веб-страницы
Я разработал больше чем 10 сайтов, тем не менее я имел сомнение в виду в 'Whats корректная единица, которую я должен использовать'. Является ли это пкс, или ими или %. Ведите меня к правильному направлению
РЕДАКТИРОВАНИЕ 1: ДЛЯ РАЗМЕТОК (Специально для контейнерных полей)
6 ответов
Различные единицы в зависимости от контекста. Если бы был один, который лучше всего подходил бы для каждой ситуации, тогда бы не было так много юнитов.
Практические правила:
Если вы работаете с экраном:
- Используйте
%для размеров шрифта - Используйте
пикселейдля изображений - Используйте
пикселей,%илиemдля размеров поля - Используйте соотношения для высоты строки
Если вы работаете с печатными СМИ:
- Было бы разумно избегать
пикселей(это не жесткое правило ни в коем случае), а все остальное - честная игра. Это действительно зависит от того, какой контроль вы хотите.
На самом деле нет правильного или неправильного, но практическое правило:
- Для всего, что вам нужен определенный фиксированный размер, используйте PX
- Для всего, что вы хотите масштабировать с помощью font-size, используйте EM
- Для всего, что вы хотите масштабировать до доступного пространства в окне / контейнере, используйте %
Каждый из них имел конкретные преимущества или недостатки в различных браузерах, когда дело дошло до пользователей, масштабирующих базовый размер шрифта / масштабирование браузера, но более поздние версии браузеров в целом решают эти проблемы, масштабируя все, а не только размер шрифта.
Используйте нужный модуль в конкретном контексте.
Unit Description ==================== % percentage in inch cm centimeter mm millimeter em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses ex one ex is the x-height of a font (x-height is usually about half the font-size) pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) px pixels (a dot on the computer screen)
Для гибкости и доступности я рекомендую использовать % для горизонтальных мер (относительно экрана пользователя) и em для вертикальных мер (относительно настройки шрифта пользователя).
Для макетов с фиксированной шириной
Для достижения совершенства пикселей я бы предложил использовать PX для ширины, высоты, полей, и padding
для line-height используйте значение без единиц измерения, например {line-height: 1.2}
, для типографских элементов используйте {font-size: 62,5%) для body , затем используйте em для других элементов
в HTML, для всегда используйте безразмерную ширину и высоту.
Если вы говорите о размере шрифта, то px и pt не идеальны.
Емкости и проценты масштабируются, поэтому они гораздо более доступны - удобны для людей с ослабленным зрением. Они также хорошо масштабируются для пользователей мобильных телефонов.
Единицы Px и Pt не масштабируются ни вверх для пользователей с ослабленным зрением, ни вниз для мобильных телефонов.
Если вы говорите о макете или контейнерах, то это зависит от типа дизайна, который вам нужен - текучий или статичный - и здесь не обязательно есть "правильный" ответ.
Без примера трудно советовать. Есть ли у вас на примете сайт, который мы могли бы рассмотреть?