Most mobile and cross-platform web developers have encountered the problem at some point: you need your web app to scale neatly to the device screen size, regardless of which of the many thousands of devices there are out there, but your units only have one design layout width, mainly . Or perhaps you need to create a per-device stylesheet for a truly scalable cross-platform UI, and want to use a scaled version of an original to base it upon. In either case, converting everything by hand is laborious and inconvenient. mobile Grappling with this problem in one of our projects, the Med.me app, our leading frontend developer Dmitriy Karpunin came up with the idea of using a post-processor to convert CSS values from one set of units to another, and that’s how , a plug-in for PostCSS that converts px values to viewport units ( , etc.), was born. postcss-px-to-viewport vw, vh For example, if you specify a notional horizontal resolution of 640 pixels and you specify a horizontal distance of , the plug-in will convert that to in the output, because 32 pixels is 5% of the 640 pixel viewport width. 32px 5vw The plug-in also has plenty of options for customization, to control exactly which values to convert, and where, and based upon which notional resolution. Installation Installation is straightforward with npm: $ npm install postcss-px-to-viewport --save-dev or with yarn, if you prefer: $ yarn add -D postcss-px-to-viewport Widely used across Asia One day in Summer 2018, we discovered an active community had sprung up around the plug-in in China — suddenly, the issues, pull requests, and forks came flooding in. Much of Asia, but China, in particular, suffers from an active proliferation of devices that developers are tasked with supporting, and quickly became invaluable to many! postcss-px-to-viewport We quickly realised that it would be helpful if the plug-in came with instructions in Chinese, not just English, and we were thrilled when a community volunteer answered our call and contributed a Chinese-language Readme for the project. Find postcss-px-to-viewport on Github! is an excellent example of a utility that does one thing and does it well, and we encourage others to open similar tools they may have written. And, if you encounter any problem in the development of your project and cannot find a ready-made solution, we are here to help you develop a plugin or even a software that will solve your problem and possibly help thousands of other developers. postcss-px-to-viewport Previously published at https://evrone.com/postcss-px-viewport . The author of the story is the chief editor at Evrone .

Elizabeth is a Chief Editor @Evrone.com, a top-notch tech writer, and a programming world celebrities interviewer. 

2021 - HackerNoon Contributor of the Year - SOFTWARE

2022 - HackerNoon Contributor of the Year - Founder Interview

2022 - HackerNoon Contributor of the Year - Kubernetes

2022 - HackerNoon Contributor of the Year - Podcast

Evrone.com

2021 - HackerNoon Contributor of the Year - KUBERNETES

2021 - HackerNoon Contributor of the Year - CONTAINERS

2021 - HackerNoon Contributor of the Year - BACKEND

2021 - HackerNoon Contributor of the Year - CONTENT-MARKETING

Nominated for 2022 - HackerNoon Contributor of the Year - Podcast

Nominated for 2022 - HackerNoon Contributor of the Year - Kubernetes

Nominated for 2022 - HackerNoon Contributor of the Year - Founder Interview

Technical Writer

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Create Scalable Interfaces With PostCSS-px-to-viewport Module

Create Scalable Interfaces With PostCSS-px-to-viewport Module

Too Long; Didn't Read

Elizabeth Lvova

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Create Scalable Interfaces With PostCSS-px-to-viewport Module

Too Long; Didn't Read

Elizabeth Lvova

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES