Относительная единица Rem

Хай олл! Единица Rem. Вопрос: можно ли ее использовать повсеместно для адаптивности с применением fall-back типа:

html {font-size: 10px;}
div {font-size: 20px; font-size: 2rem; } /* =20px /
span {font-size: 14px; font-size: 1.4rem; } /
=14px */

Em уж больно хлопотно переопределять из родителей…

Это решение оправдано использовать, только если у вас базовый текст действительно 10 пикселей. Ведь иначе придётся в каждом месте, где он не 10px, прописывать специально размер текста, да и ещё и двойной строкой с дублированием rem-ов пикселями. А это займёт больше времени, чем сэкономится на более «удобном» синтаксисе.

Этот способ был актуален раньше. Сейчас самое простое и результативное решение — постпроцессинг CSS. Намного проще не заморачиваться с фоллбеками при разработке, а когда код написан пропустить его через постпроцессор, чтобы добавились все нужные фоллбеки :grinning:

Могу посоветовать построцессор pleeease, либо можно попробовать другие автоматизированные решения вроде полифилла или препроцессорных миксинов.

3 лайка

Спасибо за развернутый ответ!

1 лайк