رسپانسیوسازی مقیاس پذیر در طراحی وب

رسپانسیوسازی مقیاس پذیر در طراحی وب


Scalable Dots
داستان از اینجایی شروع شد که بازی ای که مختص تبلت زده بودم، میبایست ریسپانسیو میشدچالشی که وجود داشت موقعیت عناصر بود که بخاطر ماهیت بازی اکثرا absolute بودن و طبیعتا واحد ها همه پیکسلکاری که من کردم دست نزدن به اعدد بود! بجاش تابعی درست کردم تا px رو به vmin تبدیل کنه و اینطوری کل پروژه مقیاس پذیر شد!پیش از ادامه و توضیح راجب تابع:اگه نمیدونید رسپانسیو چی هست به این مقاله از سینا رضائی مراجعه کنیداگه نمیدونید vw, vh, vmin چی هستن به این مقاله از css tricks مراجعه کنیدخب میدونین vmin از واحدهای تناسبی css هست، هر vmin برابر کمترین مقدار بین طول و عرض نمایشگر هست، یعنی:1vmin = min(1vh, 1vw)این دو تا گزاره رو میشه جای هم بکار برد پس اگه vh و vw رو داشته باشیم با کمک min در css میتونیم vmin رو هم داشته باشیمچیزی که ما در دست داریم، مقدار پیکسل و اندازه صفحه نمایشیه که این مقدار پیکسل رو برای اون سایز در نظر گرفته بودیمپس ورودی هامون برای تابع: px, baseWith, baseHeightو خروجی هامون: vh, vw هستنبه کمک نسبت و تناسب ها میشه به سادگی به فرمول تبدیل رسید، فرمول vw برابر میشه با:اندازه عنصر (به px) تقسیم بر اندازه پایه (به px) = X (vw) تقسیم بر 100 (vw)X = 100 * px / baseWithکه X مقدار تبدیل شده پیکسل ما به vh هست.برای vh هم به همین صورتهدر نهایت تابع ما به زبان scss به این صورت در میاد:@function vw($px, $bw: $baseWidth) { @return (100 * $px / 1px / $bw) * 1vw;}برای vh هم به این صورت:@function vh($px, $bh: $baseHeight) { @return (100 * $px / 1px / $bh) * 1vh;}حالا هر کجای scss مون این دو تابع رو فراخوانی کنیم و پیکسل بهش بدیم به ما مقادیر vh و vw میدنبرای مثال vw(100px, 1366) مقدار 7.3vw رو میدهو vh(100px, 768) مقدار 13vh رو میدهخب این تابع هامون که برای تولید vmin بهشون نیاز داریم، برای ساخت vmin هم کافیه اینها رو داخل min() بذاریم به اینصورت:min(vw(100px, 1366), vh(100px, 768))که البته در scss باید به این صورت نوشته و به عنصر تخصیص داده بشهtop: min(#{vw(100px, 1366), vh(100px, 768)});خروجی های دو تابع در جای خودشون نوشته میشن و css کمترین ارزش بین 7.3vw و 13vw رو برای پروپرتی مدنظرمون در نظر میگیرهخب این از دو تابع و نحوه استفاده از اونها، اما جایگذاری این دو تابع در جای جای پروژه ممکنه کمی سخت باشه واسه همین یه short hand براش به کمک mixin ها در scss نوشتم که به کدهای بالا اضافه میشه، خودم در اکثر جاهای پروژه از این استفاده کردم:$baseWidth: 1024px;$baseHeight: 600px;@mixin vmin($property, $pxs…) { $vmin: null; @each $px in $pxs { $min: min(#{vh($px)}, #{vw($px)}); $vmin: $vmin $min; } #{$property}: $vmin;}که نحوه استفاده ش هم به این صورته:@include vmin(“padding”, 5px 10px);خب این بود توضیح ریسپانسیوسازی مقیاسی و اینکه چطوری تمامی پیکسل های پروژه رو به vmin تبدیل کردم، در پن زیر میتونید کدهاش رو یکجا و در عمل ببینید 😉 https://codepen.io/elcoreman/pen/QWGmMvW اگه نظری داشتید خوشحال میشم با من در میون بگذارید.

منبع

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *