Можно ли так использовать rem? Как делаете адаптивные сайты вы?

Уже некоторое время практикуюсь в верстке, пока делаю страницы и сайты только для себя.
Для адаптивности (Резина + media query) решил выбрать rem, так как посчитал это удобным решением. Чтобы подсчет размеров не вызывал трудностей прописал следующие:
html {
  font-size: 62.5%; /* 10px */
}

Для элементов где важна точность, такие как border, продолжаю использовать px. Единицы для отступов зависят от требований. Если они должны быть фиксированными, то px, иначе rem. Нормальная ли эта практика, можно ли так делать? Как делаете вы?

Какими единицами вы пользуетесь для адаптивности, как и где вы их используете? Расскажите пожалуйста, интересен реальный опыт. Заранее спасибо.
  • Вопрос задан
  • 879 просмотров
Пригласить эксперта
Ответы на вопрос 3
@xenongattz
Однозначно можно.
Rem крутая штука, позволяющая пропорционально масштабировать все элементы медиа-запросу:

media (max-width: 320px) {
html {
font-size: 50%;
}
}

При этом, если заданы в rem только шрифты, то смасштабируются они, а если все элементы, то соответственно все будет изменено. Это очень удобно в большинстве случаев, например для уменьшения размеров шрифтов с уменьшением размеров устройства, с которого просматривается страничка.

А для старых браузеров это фолбэки на пиксели: https://css-tricks.com/snippets/css/less-mixin-for...
Также, есть плагин для Grunt на эту тему, который автоматом гонит все px в rem: https://www.npmjs.com/package/px2rem

А вообще, rem это единица нашего адаптивного будущего. Например Bootstrap 4 будет полностью переведен на rem'ы (кроме условий в media-запросах - там пиксели).
Ответ написан
darkmerge
@darkmerge
Front-End Dev
использую проценты для блоков. Для шрифтов мне не лень прописать один раз для планшетов меньший размер через медиа
Ответ написан
gatilin222
@gatilin222
Frontend-разработчик
За основную единицу использую rem, но в зависимости от ситуации использую %,vh,vw,em,px. Почему rem? Попробуйте масштабировать страницу (ctrl + "+") которые сверстаны по rem.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы