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