رابط های مقیاس پذیر با ماژول PostCSS-px-to-viewport ایجاد کنید

عکس پروفایل نویسنده

برخی از برنامه نویسان وب موبایل و کراس پلتفرم در برخی موارد با این مشکل روبرو شده اند: شما به برنامه وب خود نیاز دارید تا متناسب با اندازه صفحه نمایش دستگاه ، بدون در نظر گرفتن اینکه کدام یک از هزاران دستگاه موجود است ، اما واحدهای شما فقط یکی دارند. طراحی طرح عرض ، به طور عمده تلفن همراه. یا شاید شما نیاز به ایجاد یک صفحه سبک برای هر دستگاه برای یک رابط کاربر متقابل کاملاً مقیاس پذیر داشته باشید و بخواهید از یک نسخه مقیاس شده برای نسخه اصلی استفاده کنید. در هر صورت ، تبدیل همه چیز با دست کار سخت و ناخوشایندی است.

در یکی از پروژه های ما ، برنامه Med.me ، با این مشکل دست و پنجه نرم می کنیم ، توسعه دهنده پیشرو ما Dmitriy Karpunin ایده استفاده از پردازنده پست برای تبدیل مقادیر CSS از یک مجموعه واحد به واحد دیگر را پیدا کرده است و این چنین است

postcss-px-to-viewport

، یک افزونه برای PostCSS که مقادیر px را به واحدهای viewport تبدیل می کند (

vw, vh

و غیره) ، متولد شد.

به عنوان مثال ، اگر وضوح افقی تصوری 640 پیکسل و فاصله افقی را مشخص کنید

32px

، این افزونه به آن تبدیل می شود

5vw

در خروجی ، زیرا 32 پیکسل 5٪ از عرض دید 640 پیکسل است.

این افزونه همچنین دارای گزینه های زیادی برای شخصی سازی ، برای کنترل دقیق اینکه چه مقادیری را باید تبدیل کرد ، و کجا ، …

سئو PBN | خبر های جدید سئو و هک و سرور
مطالب پیشنهادی  5 معیار مهم برای پیگیری سلامت وب سایت شما