Отзывчивый макет - PX, EM или%?
Я создаю отзывчивый макет страницы, и он отлично работает до сих пор, но у меня есть вопрос:
Должен ли я использовать em, px или%?
Например, я хочу использовать радиус границы для элемента. Должен ли я использовать этот код:
border-radius: 1.563em;
Или это:
border-radius: 25px;
Должен ли я использовать ems для подобных свойств или я должен придерживаться px?
Ответы
Ответ 1
Как правило, не используйте px для гибких макетов.
Если вы используете медиа-запрос px, тогда ваш макет может выглядеть как дерьмо, когда пользователь увеличивает масштаб. И, к сожалению, я знаю все хорошо, потому что я тоже сделал эту ошибку.
Что касается вашего примера с border-radius, вы можете обнаружить, что два варианта выглядят по-другому, когда увеличивается font-size - demo. Первый и третий используют px для радиуса границы, а второй и четвертый используют em.
Но будут исключения, и если что-то не кажется правильным при масштабировании (например, box-shadow, который выглядит преувеличенным), попробуйте также с px.
Также проверьте эту статью.
Ответ 2
Только для информации, если это помогает, можно использовать rem. Он решает проблему "каскадного размера" с em. Если вы установили
body { font-size :62.5 %; } /* Trick to have 1em =10px */
li {font-size:1.4em; }
ваш <li> будет 14px, но если у вас есть список в списке, второй уровень <li> будет в 20px, а на третьем уровне будет 27px и т.д.
С rem (означает "root em" ), все <li> находятся в указанном вами размере.
Дополнительная информация: http://snook.ca/archives/html_and_css/font-size-with-rem
и http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem (на французском)
