#заметка дня
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.
#css #postcss #rem #vw #vh
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.
#css #postcss #rem #vw #vh
