این روزها هر آگهی استخدام وب دولوپری رو که باز کنید حتماً توی شرایطش "آشنایی با طراحی واکنشگرا (Responsive Design)" رو خواهید دید؛ و یکی از مهمترین مفاهیم توی طراحی ریسپانسیو صفحات و اپلیکیشنهای وب اندازهگذاری واحدهای CSS نسبت به Viewport هست.
توی این مقاله میخوایم اول به طور خلاصه با واحدهای CSS آشنا بشیم و بعد میبینیم که Viewport اصلاً چیه، و کجا و چطور باید چینش صفحاتمون رو بر این اساس تنظیم کنیم.
واحدهای اندازهگیری در CSS
یکی از مسائلی که دولوپرهای به خصوص تازهکار (و شاید حتی باتجربه!) رو در مورد CSS گیج میکنه اینه که موقع اندازهگذاری باید از چه واحدی استفاده کنند.
توی CSS ما دو دسته واحد داریم. اول واحدهای مطلق مثل px، cm، mm، in، pt (معادل 4/3 px) ، pc (معادل 16px). از این واحدها در جاهایی استفاده میکنیم که میدونیم سایز خروجیمون (media) ثابته؛ مثل پرینت.
اما زمانی که داریم طراحی واکنشگرا انجام میدیم، داریم هم برای صفحه مانیتور، هم برای صفحه گوشی و تبلت و هر مدیای دیگهای که اپلیکیشن ممکنه داخلش باز بشه اندازهگذاری میکنیم. اون وقته که باید بریم سراغ واحدهای نسبی. یک دسته از این نوع واحدها اونهایی هستند که نسبت به سایز فونت تعریف میشن. مثل :
- em – معادل سایز فونت المنتی که داخلش داریم اندازهگذاری میکنیم.
- rem – معادل سایز فونت root element صفحه که به صورت دیفالت برابر با 16px هست. یعنی وقتی عرض المنت رو 2rem تعیین میکنیم داریم به browser میگیم اون رو معادل 32px قرار بده.
میشه گفت توی اپلیکیشنهای مدرن em و rem پرکاربردترین واحدها موقع اندازهگذاری هستند. البته px هم موقعی که داریم با سایزهای کوچیکتر کار میکنیم، یا برای المنتهایی که روی جریان کلی چینش صفحه ما تاثیر ندارند (مثل مودالها)، گزینه کاملاً مناسبی هست.
اما واحدهای نسبی یک دسته دیگه هم دارند که ما بهشون میگیم:
واحدهای Viewport
اول بیاید در مورد این صحبت کنیم که viewport اصلاً چی هست.
همین الان یه بار بالا تا پایین صفحه دستگاهی که دارید این مطلب رو روش میخونید یه مرور بکنید. مثلاً روی ویندوز اون بالای بالای صفحه نوار میتونید تبهای مختلف که باز دارید رو ببینید و گوشه صفحه سه دکمه close , maximize, minimize؛ بعد از اون address bar و دکمههای کناریش و زیرش احتمالاً یه bookmark bar. پایین همه اینها و بالاتر از تسک بار مستطیلی هست که در اون صفحات وب داخل browser داره نشون داده میشه. پنجره یا دریچهای جلوی چشمای شما که از داخلش به دنیای بزرگ وب دسترسی دارید. این آرایش برای صفحه گوشی یا تبلت قطعاً متفاوت خواهد بود، اما در نهایت ما به این پنجره میگیم viewport. پس حتماً به این نکته باید دقت کنیم که طول و عرض viewport همیشه با طول و عرض صفحهمون برابر نیست.
حالا منطقیترین استراتژی برای طراحی صفحاتی که بتونن چینش خودشون رو بدون توجه به اندازه این پنجره توی دستگاههای مختلف حفظ کنن، اینه که واحدهای طراحیمون رو بر اساس viewport در نظر بگیریم. این واحدها اینها هستند:
- vh – برابر با 1% ارتفاع viewport
- vw – برابر با 1% عرض viewport
- پس مثلاً وقتی داریم بخوایم یک المنت از بالا تا پایین صفحهمون رو پر کنه (مثلاً یک بکگراند) میتونیم بهش ارتفاع 100vh رو بدیم.
- vmin و vmax : این دو واحد ایجاد شدن که مشکل portrait یا landscape بودن صفحه رو حل کنند. بگذارید با یه مثال این دو واحد رو توضیح بدیم. فرض کنید شما یک viewport با ارتفاع 600px و عرض 800px دارید. اگر به یک ارتفاع یک المنت مقدار 10vmin رو بدید در واقع دارید اون رو معادل 60px میگذارید. حالا اگر صفحهاتون رو بچرخونید این مقدار ثابت میمونه در حالی که اگر 10vh داده بودید، تبدیل میشد به 80px (چون جای عرض و ارتفاع عوض شده). vmax در نقطه مقابل vmin اندازه رو به نسبت درصدی دو عدد عرض و ارتفاع میده (در مثال ما 800px).
علاوه بر اینها ما واحدهای dvh/dvw، svh/svw و lvh/lvw رو هم داریم. این واحدها بیشتر روی مرورگرهای موبایل معنا پیدا میکنند. تعریف viewport روی صفحه موبایل پویاتر میشه. چون اونجا ممکنه نوار آدرس و نوار پایین که دکمه Home در اون قرار داره، داخل صفحه باشه یا نباشه (عناصری که ما بهشون میگیم browser UI). یعنی viewport صفحات وب روی موبایل و تبلت میتونه کل صفحه رو بپوشونه (full screen). اینجا svh/svw و lvh/lvw اندازه رو به ترتیب نسبت به کوچکترین و بزرگترین اندازه viewport تنظیم میکنه. dvh/dvw هم حالت داینامیک داره و با ورود و خروج browser UI از صفحه اندازهها رو به شکل داینامیک تغییر میده. در مورد این واحدها و تفاوتشون اینجا میتونید بیشتر بخونید.
روشهای کاربرد
دیگه همه میدونیم که یکی از مهمترین قدمها در طراحی ریسپانسیو و واکنشگرا قرار دادن تگ زیر در قسمت head صفحات html هست.
<meta name="viewport" content="width=device-width, initial-scale=1" />
این تگ داره به مروگر ما میگه محتوای ما کل عرض صفحه نمایش رو پر خواهد کرد و از طرف دیگه مقیاس ما 1 هست و صفحه زوم نشده.
علاوه بر تگ بالا و به کمک media queries که در خود CSS اعمال میشه، ما میتونیم اندازه محتویات صفحهامون رو کنترل کنیم.
حالا کجا و چطور باید از این واحدها استفاده کنیم. مثال زیر رو در نظر بگیرید:
body { height: 100vh; /* 100% of the viewport height */ } h1 { font-size: 5vh; } /* 5% of the viewport height */
اینجا ما داریم اعلام میکنیم که ارتفاع بدنه html (یعنی همون تگ body) باید برابر با ارتفاع viewport باشه. و بعد داخل این بدنه یک سرفصل با تگ h1 تعریف میکنیم که اندازه فونتش برابر با 5vh هست. این یعنی هر چقدر اندازه صفحه ما کوچیک و بزرگ بشه، ارتفاع نوشته داخل این تگ برابر با 5% ارتفاع viewport باقی میمونه که این باعث میشه آرایش المنتهای دور و برش به هم نخوره.
اما در مثال زیر:
body { width: 100vw; /* 100% of the viewport width */ } .container { width: 50vw; /*50% of the viewport width */ margin: 0 auto; }
ما اول عرض body رو معادل عرض صفحه قرار میدیم و بعد تعیین میکنیم اون المنت container که قراره محتوای اصلی داخلش چیده بشه اولاً همیشه نصف عرض صفحه رو اشغال کنه و دوم این که وسط صفحه جا بگیره.
خب حالا فهمیدیم این واحدها چی هستن. کجا میتونیم ازشون استفاده کنیم؟
برای واکنشگرا کردن صفحه و المنتهای داخل اون
element { width: 10vw; }
همونطور که گفتم برای ما به عنوان توسعهدهندههای وب مدرن خیلی اهمیت داره که چینش صفحات و همینطور فاصله کلمات با همدیگه و بین خطوط، با تغییر اندازه صفحه به هم نریزه. اختصاص دادن مقادیر عرض و ارتفاع و همینطور سایز فونت نسبت به سایز viewport خیال ما رو از حفظ آرایش در همه دستگاهها راحت میکنه.
تعیین عرض و ارتفاع پیشزمینه و المنتهایی که در کل صفحه حضور دارند
nav { width: 100vw; }
خیلی وقتها ما المنتهایی داریم که میخوایم کل صفحهمون رو بپوشونه؛ مثل عکسهای پیشزمینه یا نوار پیمایش (Nav Bar). این جور مواقعه که استفاده از واحدهای vh و vw برای ما تضمین میکنه که فضای خالی در اطراف این المنتها باقی نخواهد موند.
section { background-image: url(background.jpg); background-size: cover; height: 100vh; }
موقعیتدهی ثابت در صفحه
در مثال نوار پیمایش گاهی میشه که ما میخوایم این نوار به بالای صفحه بچسبه و وقتی صفحه رو به سمت پایین اسکرول میکنیم بالای صفحه همراه با ما بیاد پایین. در این جا میتونیم مطابق کد زیر عمل کنیم.
nav { position: fixed; top: 0; left: 0; right: 0; height: 10vh; }
در این مثال نواری خواهیم داشت با ارتفاعی برابر 10درصد viewport که به با بالای صفحه چسبیده باقی میمونه.
محدودیتها
واحدهای vh/vw و em و rem همراه با CSS3 معرفی شدند و در همه مرورگرهای مدرن قابل اجرا هستند. برای اطمینان از این که مرورگری که شما دارید براش طراحی میکنید از این واحدها پیشتیبانی میکنه یا نه پیشنهاد میکنم از این وبسایت کمک بگیرید.
حرف آخر
تعیین کردن بهترین روش اجرایی (best practices) برای استفاده از این واحدها مثل خیلی دیگه از کاربردهای CSS سخت خواهد بود.
اما اجتماعی که بین خیلی از وب دولوپرهای مدرن وجود داره اینه که طراحی و اندازهگذاری رو بر اساس مقیاس کار انجام بدن.
در این سیستم کلی برای مقیاسهای کوچیکتر، واحد px، در مقیاس متوسط واحدهای em و rem، و در مقیاسهای بزرگتر و عناصری که نقش تعیینکنندهتری در جریان صفحات ما دارند، از واحدهای vh/vw و سایر واحدهای viewport استفاده خواهد شد.