برخی از برنامه نویسان وب موبایل و کراس پلتفرم در برخی موارد با این مشکل روبرو شده اند: شما به برنامه وب خود نیاز دارید تا متناسب با اندازه صفحه نمایش دستگاه ، بدون در نظر گرفتن اینکه کدام یک از هزاران دستگاه موجود است ، اما واحدهای شما فقط یکی دارند. طراحی طرح عرض ، به طور عمده تلفن همراه. یا شاید شما نیاز به ایجاد یک صفحه سبک برای هر دستگاه برای یک رابط کاربر متقابل کاملاً مقیاس پذیر داشته باشید و بخواهید از یک نسخه مقیاس شده برای نسخه اصلی استفاده کنید. در هر صورت ، تبدیل همه چیز با دست کار سخت و ناخوشایندی است.
در یکی از پروژه های ما ، برنامه Med.me ، با این مشکل دست و پنجه نرم می کنیم ، توسعه دهنده پیشرو ما Dmitriy Karpunin ایده استفاده از پردازنده پست برای تبدیل مقادیر CSS از یک مجموعه واحد به واحد دیگر را پیدا کرده است و این چنین است
postcss-px-to-viewport، یک افزونه برای PostCSS که مقادیر px را به واحدهای viewport تبدیل می کند (
vw, vhو غیره) ، متولد شد.
به عنوان مثال ، اگر وضوح افقی تصوری 640 پیکسل و فاصله افقی را مشخص کنید
32px، این افزونه به آن تبدیل می شود
5vwدر خروجی ، زیرا 32 پیکسل 5٪ از عرض دید 640 پیکسل است.
این افزونه همچنین دارای گزینه های زیادی برای شخصی سازی ، برای کنترل دقیق اینکه چه مقادیری را باید تبدیل کرد ، و کجا ، …