واحدهای نسبی در CSS: راهنمای جامع

.deeply-nested-element {
  font-size: 1.5rem; /* Always 24px, regardless of nesting */ 
  padding: 1rem; /* Always 16px */ 
  margin: 0.5rem; /* Always 8px */ 
}

Rems یکپارچگی را در سراسر سند شما فراهم می کند و آنها را برای اندازه فونت و بسیاری از ویژگی های دیگر ایده آل می کند!

مثال عملی

بیایید یک جزء دکمه قابل دسترسی ایجاد کنیم که با استفاده از ترکیبی از به خوبی مقیاس شود em و rem:

.button { 
  font-size: 1rem; /* 16px (or the prefered size set by the user) */ 

  padding: .5em 1em; /* 8px 16px, using em to scale with the current element font-size */ 
  border-radius: .25em; /* 4px */ 
  transition: font-size .3s ease, padding .3s ease, border-radius .3s ease; 
} 

@media (prefers-reduced-motion: no-preference) {
  .button:hover { 
    font-size: 1.1rem; /* Grows to 17.6px on hover */
  }
}

در این مثال، در صورتی که کاربر اندازه فونت سند html را تغییر دهد، بالشتک و شعاع حاشیه دکمه به تناسب مقیاس خواهد شد 🙂

Viewport-واحدهای نسبی

در حالی که ems و rems فوق العاده مفید هستند، گاهی اوقات ما به واحدهایی نیاز داریم که نسبت به اندازه ویوپورت (صفحه نمایش) باشند. اینجاست که واحدهای مربوط به viewport وارد می شوند:

• vw: 1% از عرض درگاه دید
• vh: 1% ارتفاع درگاه دید
• vmin: 1% ابعاد کوچکتر (عرض یا ارتفاع)
• vmax: 1% ابعاد بزرگتر (عرض یا ارتفاع)

این واحدها به ویژه برای ایجاد طرح‌بندی‌های تمام صفحه یا عناصری که نیاز به مقیاس چشمگیری با اندازه درگاه دید دارند، مفید هستند.

.hero-section { 
  height: 100vh;
  width: 100vw;
  /* ... */
}

.hero-section-image { 
  width: 50vmin; 
  height: 50vmin; 
  object-fit: cover; 
  /* ... */
}

این یک بخش قهرمان تمام قد با محتوایی ایجاد می کند که بر اساس اندازه نمای در مقیاس بندی می شود، و تصویری که همیشه مربع است و نیمی از ابعاد نمای کوچکتر را اشغال می کند.

در حالی که این واحدها عالی هستند، در ابتدا با در نظر گرفتن مرورگرهای دسکتاپ طراحی شده بودند، که در آن اندازه پورت دید ثابت می ماند مگر اینکه کاربر به صورت دستی اندازه پنجره را تغییر دهد.
در موبایل، داستان دیگری است.

ماهیت پویا پورت های دید موبایل

بسیاری از مرورگرهای تلفن همراه یک ویژگی تجربه کاربری را اجرا می‌کنند که در آن عناصر رابط کاربری مرورگر، مانند نوار آدرس و دکمه‌های پیمایش، می‌توانند بر اساس تعامل کاربر ظاهر یا ناپدید شوند. در اینجا نحوه عملکرد آن به طور معمول است:

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

این رفتار پویا یک اندازه دریچه نوسانی ایجاد می کند که می تواند منجر به مشکلات چیدمان در هنگام استفاده از واحدهای مربوط به viewport شود. vh (برای روکش ها، میله های جانبی و غیره…).

واحدهای نمای پویا را وارد کنید

برای رسیدگی به این مشکلات، واحدهای دید جدید معرفی شدند:

• svh (ارتفاع درگاه دید کوچک): ارتفاع درگاه دید را هنگامی که عناصر رابط کاربری مرورگر تلفن همراه قابل مشاهده هستند، نشان می دهد.
• lvh (ارتفاع درگاه دید بزرگ): نشان دهنده ارتفاع درگاه دید زمانی است که عناصر رابط کاربری مرورگر تلفن همراه پنهان هستند.
• dvh (Dynamic Viewport Height): به صورت پویا بین را تنظیم می کند svh و lvh همانطور که عناصر رابط کاربری مرورگر ظاهر یا ناپدید می شوند.

برای عرض و برای ابعاد کوچکتر و بزرگتر (عرض یا ارتفاع) خواص یکسانی داریم:
s(vh | vw | vmin | vmax)
l(vh | vw | vmin | vmax)
d(vh | vw | vmin | vmax)

این مثال را در نظر بگیرید:

.side-menu { 
  height: 100dvh; 
}

این عنصر به صورت پویا ارتفاع خود را بر اساس وضعیت فعلی عناصر رابط کاربری مرورگر تلفن همراه تنظیم می کند و تجربه کاربری سازگار تری را ارائه می دهد.

استفاده نکن dvh برای بخش های قابل پیمایش: تصور کنید در حال پیمایش از کنار چندین بخش تمام صفحه می‌خوانید 100dvh، سپس کمی به بالا پیمایش کنید. محتوا به طور ناگهانی می پرد waaaaay بالا.
این می تواند باعث تاخیر بزرگ شود و مرورگر را مجبور می کند کل طرح بندی صفحه را مجدداً محاسبه کند، که می تواند به عملکرد آسیب برساند (تخریب طرح).

Inline / Block Properties Logical

برای اطمینان از کامل بودن، ذکر مجموعه دیگری از انواع واحدها مهم است: درون خطی و بلوک. این ویژگی‌ها به‌عنوان «ویژگی‌های منطقی» شناخته می‌شوند. عملکردی مشابه با عرض و ارتفاع دارند، اما برای انطباق با زبان‌های عمودی نوشتاری مانند مغولی طراحی شده‌اند و به طور مؤثر رفتار آن‌ها را جابه‌جا می‌کنند. vi ، vb ، svi ، svb ، lvi ، lvb ، dvi ، dvb.

پشتیبانی از مرورگر و بازگشت به عقب

اگرچه پشتیبانی از واحدهای نمای پویا 93.21٪ است (در زمان نگارش مقاله)، اگر مرورگرهای قدیمی را هدف قرار می دهید، ممکن است بخواهید مواردی را ارائه دهید:

.modal {
  height: 100vh;  /* Fallback for browsers that don't support dvh */
  height: 100dvh; /* Will be used by browsers that support it */
}

ترکیب واحدها

استفاده كردن calc تابع

این calc() تابع یک تغییر دهنده بازی برای طراحی واکنشگرا است. این به شما امکان می دهد عملیات ریاضی پایه را با واحدهای مختلف انجام دهید و ایجاد طرح بندی های انعطاف پذیر را آسان تر می کند. در اینجا چیزی است که شما باید بدانید:

• پشتیبانی از افزودن (+)، منها کردن (-)، ضرب (*، و تقسیم (/)
• همیشه فضاهای اطراف اپراتورها را اضافه کنید

مثال:

p { 
  font-size: calc(0.5em + 1svw); 
}

در این مثال، اندازه فونت با عرض درگاه نمایش مقیاس می شود اما هرگز کوچکتر از آن نمی شود 0.5rem.

توجه داشته باشید: همیشه واحدهای em یا rem را هنگام استفاده از واحدهای درگاه نمایش برای اندازه فونت اضافه کنید. این تضمین می کند که اولویت های فونت کاربر رعایت می شود.

استفاده كردن clamp تابع

این clamp() تابع این مفهوم را حتی فراتر می برد و به شما امکان می دهد یک مقدار ترجیحی را با حداقل و حداکثر تنظیم کنید. clamp() سه استدلال می گیرد:

• حداقل ارزش
• مقدار ترجیحی (می تواند یک عبارت باشد)
• حداکثر مقدار

به این مثال نگاهی بیندازید:

h1 {
  font-size: clamp(1em, 5vw, 6em);
}

این یک اندازه فونت را تنظیم می کند که با عرض درگاه نمایش مقیاس می شود اما هرگز کوچکتر از آن نیست 1em یا بزرگتر از 6em.

استفاده از سایر توابع مفید

• min(): کوچکترین مقدار را از یک لیست انتخاب می کند
  • مثال: width: min(200px, 20svw);
• max(): بزرگترین مقدار را از یک لیست انتخاب می کند
  • مثال: min-height: max(200px, 20svw);

بسته شدن

تسلط بر واحدهای نسبی در CSS یک تغییر دهنده بازی برای ایجاد طرح های انعطاف پذیر و در دسترس است. با درک تفاوت‌های ظریف ems، rems، واحدهای viewport و نحوه ترکیب موثر آنها، می‌توانید طرح‌بندی‌هایی ایجاد کنید که به‌طور یکپارچه با اندازه‌های مختلف صفحه نمایش و تنظیمات برگزیده کاربر سازگار شوند.

معرفی واحدهای نمای پویا مانند dvh نشان دهنده گام مهمی در تطبیق طراحی وب با چالش های منحصر به فرد مرورگرهای تلفن همراه است. با استفاده از این واحدها، می‌توانید طرح‌بندی‌های واکنش‌گرا ایجاد کنید که ماهیت پویایی درگاه‌های نمایش تلفن همراه را کنترل می‌کند.

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

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

تا دفعه بعد، کد نویسی مبارک!