وقتی در CSS می‌نویسیم یک عنصر 300px عرض داشته باشد یا فاصله داخلی آن 20px باشد، در واقع داریم اندازه‌ای را برای مرورگر مشخص می‌کنیم. اما CSS فقط به px محدود نمی‌شود. واحدهایی مانند %، em، rem، vw و vh به ما اجازه می‌دهند اندازه‌ها را نسبت به عنصر والد، اندازه فونت یا ابعاد صفحه تعیین کنیم. انتخاب درست واحد می‌تواند باعث شود طراحی ما انعطاف‌پذیرتر، خواناتر و آماده‌تر برای نمایش در اندازه‌های مختلف صفحه باشد.

در این مقاله ابتدا با مفهوم واحد اندازه‌گیری در CSS آشنا می‌شویم، سپس واحدهای مطلق و نسبی را بررسی می‌کنیم و تفاوت px، %، em، rem، vw و vh را با مثال‌های ساده یاد می‌گیریم. در پایان نیز یک پروژه کوچک طراحی می‌کنیم تا کاربرد این واحدها را در یک صفحه واقعی ببینیم.

واحد اندازه‌گیری در CSS چیست؟

وقتی یک مقدار عددی را در CSS برای ویژگی‌هایی مانند width، height، padding، margin یا font-size تعیین می‌کنیم، معمولاً باید مشخص کنیم این عدد با چه واحدی اندازه‌گیری می‌شود.

مثلاً:

.card {
    width: 300px;
}

در اینجا 300 مقدار عددی و px واحد اندازه گیری است.

بنابراین:

width: 300px;

یعنی عرض عنصر برابر با ۳۰۰ پیکسل CSS باشد.

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

واحدهای مطلق و نسبی

به صورت کلی، واحدهای اندازه‌گیری CSS را می‌توان به دو گروه مهم تقسیم کرد:

واحدهای مطلق
واحدهای نسبی

واحدهای مطلق

واحد مطلق مقدار مشخص‌تری دارد و نسبت آن به محیط اطراف تغییر نمی‌کند.

مهم‌ترین واحدی که در طراحی صفحات وب با آن کار می‌کنیم:

px

است.

واحدهایی مانند:

cm
mm
in
pt
pc

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

واحدهای نسبی

واحدهای نسبی به یک مقدار دیگر وابسته هستند.

برای مثال:

%
em
rem
vw
vh

این واحدها در طراحی انعطاف‌پذیر اهمیت زیادی دارند.

برای مثال:

.box {
    width: 50%;
}

در اینجا 50% به یک مرجع دیگر وابسته است و مانند 500px یک مقدار ثابت نیست.

واحد px

یکی از ساده‌ترین و پرکاربردترین واحدها px است.

مثلاً:

.box {
    width: 300px;
    height: 200px;
}

در این مثال عرض عنصر 300px و ارتفاع آن 200px است.

همچنین:

.title {
    font-size: 32px;
}

اندازه فونت را مشخص می‌کند.

آیا 1px همیشه یک پیکسل فیزیکی است؟

نه.

یک CSS Pixel الزاماً برابر با یک پیکسل فیزیکی روی صفحه نمایش نیست. مرورگر و دستگاه، چگالی نمایشگر و مقیاس‌بندی را در نحوه نمایش آن در نظر می‌گیرند. بنابراین بهتر است px را به عنوان یک واحد CSS در نظر بگیریم، نه الزاماً یک نقطه فیزیکی روی نمایشگر.

چه زمانی از px استفاده کنیم؟

px برای شروع یادگیری بسیار مناسب است و در موارد زیادی نیز در پروژه‌های واقعی کاربرد دارد.

مثلاً:

.card {
    border: 1px solid #ddd;
}

.icon {
    width: 24px;
    height: 24px;
}

در این موارد استفاده از px کاملاً طبیعی است.

اما برای همه چیز نمی‌توانیم همیشه مقدار ثابت تعیین کنیم.

فرض کنید بنویسیم:

.container {
    width: 1200px;
}

در یک صفحه بزرگ ممکن است خوب باشد، اما در یک موبایل با عرض بسیار کمتر، چنین عنصری می‌تواند باعث ایجاد مشکل شود.

اینجاست که واحدهای نسبی اهمیت پیدا می‌کنند.

واحد درصد %

یکی از مهم‌ترین واحدهای نسبی:

%

است.

مثلاً:

.container {
    width: 80%;
}

یعنی عرض عنصر بر اساس اندازه مرجع مربوط به آن ویژگی تعیین شود.

برای یک مثال ساده:

<div class="container">
    محتوای سایت
</div>

.container {
    width: 80%;
}

اگر فضای مرجع برای این عنصر 1000px باشد، عرض 80 درصد آن برابر با 800px خواهد بود.

درصد برای عرض

استفاده از درصد برای عرض بسیار رایج است:

.box {
    width: 50%;
}

در این حالت عنصر نیمی از عرض مرجع خود را می‌گیرد.

مثال:

.parent {
    width: 800px;
}

.child {
    width: 50%;
}

در این مثال:

parent → 800px
child → 50%

بنابراین عرض فرزند در این مثال برابر با:

400px

خواهد بود.

درصد برای ارتفاع

درصد برای height نیز قابل استفاده است، اما یک نکته مهم وجود دارد.

مثلاً:

.parent {
    height: 500px;
}

.child {
    height: 50%;
}

در اینجا ارتفاع فرزند می‌تواند نسبت به ارتفاع مشخص‌شده والد محاسبه شود.

اما اگر ارتفاع والد به شکل مشخصی تعیین نشده باشد، درصد ارتفاع همیشه نتیجه‌ای که انتظار دارید ایجاد نمی‌کند.

بنابراین هنگام استفاده از درصد برای ارتفاع، باید به مرجع اندازه‌گیری توجه کنید.

واحد em

یکی از مهم‌ترین واحدهای نسبی:

em

است.

em با اندازه فونت مرتبط است. رفتار دقیق آن به ویژگی‌ای که در آن استفاده می‌شود بستگی دارد؛ برای font-size نسبت به اندازه فونت والد محاسبه می‌شود و برای بسیاری از ویژگی‌های دیگر نسبت به اندازه فونت خود عنصر محاسبه می‌شود.

مثلاً:

.parent {
    font-size: 20px;
}

.child {
    font-size: 1em;
}

در این مثال 1em برای font-size فرزند نسبت به اندازه فونت والد محاسبه می‌شود؛ بنابراین اندازه فونت فرزند 20px خواهد بود.

مثال ساده em

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;
}

در این حالت:

20px × 1.5 = 30px

بنابراین اندازه فونت .child برابر با 30px می‌شود.

استفاده از em برای فاصله‌ها

em فقط برای font-size نیست.

مثلاً:

.button {
    font-size: 16px;
    padding: 1em 2em;
}

در اینجا فاصله داخلی نسبت به اندازه فونت عنصر محاسبه می‌شود.

بنابراین اگر اندازه فونت دکمه تغییر کند، padding نیز متناسب با آن تغییر خواهد کرد.

این ویژگی می‌تواند برای ساخت کامپوننت‌های انعطاف‌پذیر بسیار مفید باشد.

مشکل احتمالی em: تو در تو شدن

یکی از نکات مهم em این است که در ساختارهای تو در تو ممکن است مقدارها روی هم اثر بگذارند.

مثلاً:

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;
}

.grandchild {
    font-size: 1.5em;
}

در این حالت اندازه فونت هر سطح می‌تواند نسبت به سطح قبلی محاسبه شود.

به صورت ساده:

parent
20px

child
1.5 × 20 = 30px

grandchild
1.5 × 30 = 45px

بنابراین در ساختارهای پیچیده، استفاده زیاد از em ممکن است محاسبات را دشوار کند.

برای همین است که rem در بسیاری از پروژه‌ها بسیار محبوب است.

واحد rem

rem مخفف:

root em

است.

این واحد نسبت به اندازه فونت عنصر ریشه، معمولاً <html>، محاسبه می‌شود.

مثلاً:

html {
    font-size: 16px;
}

.title {
    font-size: 2rem;
}

در این حالت:

2 × 16px = 32px

بنابراین:

2rem = 32px

چرا rem مهم است؟

یکی از مزیت‌های مهم rem این است که محاسبه آن به ساختار تو در توی عناصر وابسته نیست و مستقیماً به اندازه فونت ریشه مربوط می‌شود.

مثلاً:

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

.small {
    font-size: 0.875rem;
}

در این حالت:

h1 → 32px
p → 16px
small → 14px

به شرط اینکه اندازه فونت ریشه 16px باشد.

em یا rem؟

این دو را با هم مقایسه کنیم.

em

نسبت به اندازه فونت عنصر یا والد آن، بسته به کاربرد، محاسبه می‌شود.

rem

نسبت به اندازه فونت عنصر ریشه یعنی <html> محاسبه می‌شود.

مثلاً:

html {
    font-size: 16px;
}

.parent {
    font-size: 20px;
}

.child-em {
    font-size: 2em;
}

.child-rem {
    font-size: 2rem;
}

نتیجه:

child-em
→ 2 × 20px
→ 40px

child-rem
→ 2 × 16px
→ 32px

بنابراین em و rem یکسان نیستند.

یک روش رایج برای استفاده از rem

می‌توانیم اندازه پایه را در html مشخص کنیم:

html {
    font-size: 16px;
}

سپس:

body {
    font-size: 1rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
}

این روش باعث می‌شود مقیاس‌بندی اندازه‌های متنی منظم‌تر شود.

البته در پروژه‌های واقعی بهتر است اندازه پایه را بدون دلیل تغییر ندهید و نیازهای دسترسی‌پذیری کاربر را نیز در نظر بگیرید. MDN نیز اشاره می‌کند که واحدهای نسبی مانند rem و em می‌توانند برای ایجاد اندازه‌های مقیاس‌پذیر مناسب باشند.

واحد vw

حالا به یکی از مهم‌ترین واحدها برای Responsive Design می‌رسیم:

vw

vw مخفف:

Viewport Width

است.

هر:

1vw

برابر با ۱ درصد عرض viewport است.

مثلاً:

.box {
    width: 50vw;
}

یعنی عرض عنصر برابر با ۵۰ درصد عرض viewport باشد.

اگر عرض viewport برابر با 1000px باشد:

50vw = 500px

viewport چیست؟

Viewport تقریباً همان ناحیه قابل مشاهده صفحه در مرورگر است.

برای مثال، اگر پنجره مرورگر شما عرضی برابر با:

1200px

داشته باشد، در حالت ساده:

1vw = 12px

خواهد بود.

بنابراین:

50vw = 600px

است.

اگر کاربر پنجره مرورگر را کوچک‌تر کند، مقدار vw نیز تغییر می‌کند.

مثال کاربردی vw

.hero-title {
    font-size: 5vw;
}

در این حالت اندازه عنوان نسبت به عرض viewport تغییر می‌کند.

این ویژگی می‌تواند برای بعضی طراحی‌های Responsive کاربردی باشد، اما استفاده مستقیم از vw برای تمام متن‌ها همیشه مناسب نیست؛ زیرا ممکن است متن در صفحه‌های خیلی کوچک یا خیلی بزرگ بیش از حد کوچک یا بزرگ شود.

در مقالات آینده، با تکنیک‌های بهتر برای کنترل اندازه Responsive متن آشنا خواهیم شد.

واحد vh

واحد:

vh

مخفف:

Viewport Height

است.

هر:

1vh

برابر با ۱ درصد ارتفاع viewport است.

مثلاً:

.hero {
    height: 80vh;
}

یعنی ارتفاع عنصر بر اساس ۸۰ درصد ارتفاع viewport تعیین شود.

اگر ارتفاع viewport برابر با:

800px

باشد:

80vh = 640px

خواهد بود.

مثال کاربردی vh

برای یک بخش Hero:

.hero {
    min-height: 80vh;
}

در این حالت ارتفاع بخش می‌تواند متناسب با ارتفاع صفحه نمایش تغییر کند.

این روش برای Hero Section، صفحات معرفی و بعضی Layoutهای تمام‌صفحه کاربردی است.

تفاوت vw و vh

به شکل ساده:

vw
→ نسبت به عرض viewport

vh
→ نسبت به ارتفاع viewport

مثلاً:

.box {
    width: 50vw;
    height: 50vh;
}

یعنی:

عرض → ۵۰٪ عرض صفحه
ارتفاع → ۵۰٪ ارتفاع صفحه

واحدهای vmin و vmax

CSS واحدهای دیگری نیز برای viewport دارد:

vmin
vmax

vmin بر اساس کوچک‌ترین بُعد viewport و vmax بر اساس بزرگ‌ترین بُعد viewport محاسبه می‌شود.

مثلاً:

.box {
    width: 50vmin;
}

یعنی عرض عنصر بر اساس کوچک‌ترین مقدار بین عرض و ارتفاع viewport محاسبه شود.

در این مرحله لازم نیست از این واحدها زیاد استفاده کنید؛ شناخت مفهوم آن‌ها فعلاً کافی است.

واحدهای جدیدتر viewport

در CSS مدرن واحدهایی مانند:

svh
lvh
dvh

نیز وجود دارند که برای تفاوت‌های اندازه viewport در دستگاه‌های مختلف، به‌خصوص مرورگرهای موبایل، طراحی شده‌اند.

مثلاً:

.hero {
    min-height: 100dvh;
}

dvh به dynamic viewport height مربوط است.

فعلاً لازم نیست این واحدها را جایگزین vh در تمام پروژه‌ها کنید. هدف این بخش آشنایی با مفهوم آن‌هاست؛ در زمان ورود به Responsive Design، استفاده از آن‌ها را دقیق‌تر بررسی خواهیم کرد.

مقایسه واحدهای مهم

چه زمانی از کدام واحد استفاده کنیم؟

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

هر واحد کاربرد خودش را دارد.

px

برای مواردی که اندازه مشخص و دقیق می‌خواهید:

border: 1px solid #ddd;

%

برای اندازه‌هایی که باید نسبت به فضای موجود تغییر کنند:

.container {
    width: 90%;
}

em

برای اندازه‌هایی که می‌خواهید نسبت نزدیکی با اندازه فونت همان بخش داشته باشند:

.button {
    padding: 0.8em 1.5em;
}

rem

برای اندازه‌های مقیاس‌پذیر که بهتر است بر اساس اندازه فونت ریشه کنترل شوند:

h1 {
    font-size: 2rem;
}

vw

برای اندازه‌هایی که باید مستقیماً نسبت به عرض viewport تغییر کنند:

.hero-title {
    font-size: 5vw;
}

vh

برای اندازه‌هایی که باید نسبت به ارتفاع viewport تغییر کنند:

.hero {
    min-height: 80vh;
}

ترکیب چند واحد در یک پروژه

در پروژه واقعی معمولاً فقط یک واحد استفاده نمی‌کنیم.

مثلاً:

.container {
    width: 90%;
    max-width: 1200px;
    padding: 2rem;
}

.title {
    font-size: 2.5rem;
}

.hero {
    min-height: 80vh;
}

در این مثال:

90%
→ عرض انعطاف‌پذیر

1200px
→ حداکثر عرض

2rem
→ فاصله داخلی مقیاس‌پذیر

2.5rem
→ اندازه عنوان

80vh
→ ارتفاع وابسته به viewport

این ترکیب در طراحی صفحات واقعی بسیار رایج است.

تفاوت width: 100% و width: 100vw

این دو مقدار ممکن است در نگاه اول مشابه به نظر برسند:

width: 100%;

و:

width: 100vw;

اما دقیقاً یک مفهوم ندارند.

100% معمولاً نسبت به اندازه مرجع مربوط به عنصر محاسبه می‌شود.

اما 100vw بر اساس عرض viewport محاسبه می‌شود.

بنابراین:

.container {
    width: 100%;
}

و:

.container {
    width: 100vw;
}

را نباید همیشه جایگزین یکدیگر بدانیم.

در بعضی شرایط 100vw می‌تواند باعث شود عنصر از فضای محتوایی مورد انتظار بزرگ‌تر شود، بنابراین هنگام استفاده از آن باید نتیجه را روی صفحه واقعی بررسی کنید.

مثال: ساخت یک Container انعطاف‌پذیر

یک الگوی ساده و کاربردی:

<div class="container">
    <h1>آموزش طراحی وب</h1>

    <p>
        در این دوره CSS را از پایه یاد می‌گیریم.
    </p>
</div>

CSS:

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

در اینجا:

90%
→ روی صفحه‌های کوچک‌تر فضای اطراف باقی می‌گذارد

max-width: 1100px
→ روی صفحه‌های خیلی بزرگ محتوا بیش از حد کشیده نمی‌شود

2rem
→ فاصله داخلی مقیاس‌پذیر

margin: 0 auto
→ عنصر در مرکز قرار می‌گیرد

این الگو را در پروژه‌های واقعی بسیار خواهید دید.

مثال: کارت با واحدهای مختلف

<div class="card">
    <h2>دوره CSS</h2>

    <p>
        آموزش CSS از پایه تا طراحی Layoutهای مدرن.
    </p>
</div>

CSS:

html {
    font-size: 16px;
}

.card {
    width: 90%;
    max-width: 400px;

    padding: 1.5rem;

    margin: 2rem auto;

    background-color: #f5f5f5;
}

.card h2 {
    font-size: 1.75rem;
}

.card p {
    font-size: 1rem;
    line-height: 1.8;
}

در این مثال:

%
→ برای عرض

px
→ اندازه پایه فونت

rem
→ اندازه متن و فاصله‌ها

استفاده شده است.

یک پروژه عملی کوچک

حالا یک صفحه ساده ایجاد کنیم که چند واحد را با هم استفاده کند.

HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>واحدهای CSS</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <section class="hero">

        <div class="hero-content">

            <h1>یادگیری CSS</h1>

            <p>
                با یادگیری واحدهای CSS می‌توانید
                صفحات انعطاف‌پذیرتری طراحی کنید.
            </p>

            <a href="#">شروع یادگیری</a>

        </div>

    </section>

</body>
</html>

CSS

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.hero {
    min-height: 80vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem;

    background-color: #222;
    color: white;

    text-align: center;
}

.hero-content {
    width: 90%;
    max-width: 700px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.1rem;
    line-height: 1.9;
}

.hero a {
    display: inline-block;

    margin-top: 1.5rem;

    padding: 0.8em 1.5em;

    color: white;
    background-color: #e65c00;

    text-decoration: none;
}

در این پروژه از چند واحد استفاده کردیم:

80vh
→ ارتفاع Hero

90%
→ عرض محتوای داخلی

700px
→ حداکثر عرض

2rem
→ فاصله داخلی

3rem
→ اندازه عنوان

1.1rem
→ اندازه متن

em
→ padding لینک

این مثال نشان می‌دهد که در یک پروژه واقعی می‌توان چند واحد را بر اساس کاربردشان با هم ترکیب کرد.

اشتباهات رایج

۱. استفاده از px برای همه چیز

مثلاً:

.title {
    font-size: 40px;
}

.text {
    font-size: 18px;
}

.container {
    width: 1200px;
}

.card {
    padding: 30px;
}

این کد لزوماً اشتباه نیست؛ اما اگر همه اندازه‌ها ثابت باشند، طراحی ممکن است در اندازه‌های مختلف صفحه انعطاف کمتری داشته باشد.

۲. استفاده بی‌دلیل از vw برای متن

مثلاً:

body {
    font-size: 2vw;
}

ممکن است در صفحه‌های بسیار کوچک متن بیش از حد کوچک و در صفحه‌های بسیار بزرگ بیش از حد بزرگ شود.

برای متن معمولی، rem اغلب انتخاب قابل‌کنترل‌تری است.

۳. اشتباه گرفتن em و rem

به یاد داشته باشید:

em
→ وابسته به context فونت

rem
→ وابسته به root

این تفاوت در عناصر تو در تو بسیار مهم می‌شود.

۴. استفاده نادرست از درصد برای ارتفاع

مثلاً:

.child {
    height: 50%;
}

اگر مرجع ارتفاع مشخصی وجود نداشته باشد، ممکن است نتیجه با انتظار شما متفاوت باشد.

۵. استفاده از 100vw بدون توجه به Layout

گاهی:

width: 100vw;

می‌تواند باعث ایجاد مشکلاتی در عرض صفحه شود.

قبل از استفاده از vw همیشه بررسی کنید که آیا واقعاً به اندازه viewport نیاز دارید یا اندازه فضای موجود یعنی % مناسب‌تر است.

تمرین‌های این مقاله

تمرین ۱

یک کارت بسازید:

.card {
    width: 80%;
    max-width: 400px;
}

سپس اندازه پنجره مرورگر را تغییر دهید و رفتار آن را مشاهده کنید.

تمرین ۲

یک عنوان بسازید و این دو حالت را مقایسه کنید:

.title {
    font-size: 32px;
}

و:

.title {
    font-size: 2rem;
}

تمرین ۳

یک والد بسازید:

.parent {
    font-size: 20px;
}

و داخل آن دو عنصر قرار دهید:

.child-em {
    font-size: 2em;
}

.child-rem {
    font-size: 2rem;
}

تفاوت آن‌ها را بررسی کنید.

تمرین ۴

یک Hero ایجاد کنید:

.hero {
    min-height: 80vh;
}

سپس ارتفاع پنجره مرورگر را تغییر دهید و رفتار Hero را مشاهده کنید.

تمرین ۵

یک عنوان با:

font-size: 5vw;

ایجاد کنید.

عرض مرورگر را تغییر دهید و مشاهده کنید که اندازه عنوان چگونه تغییر می‌کند.

چالش مقاله

یک صفحه معرفی ساده طراحی کنید که در آن حداقل از این واحدها استفاده شده باشد:

%
px
rem
em
vw
vh

مثلاً:

Hero
↓
عنوان
↓
توضیح
↓
دکمه
↓
کارت‌های معرفی

سعی کنید هر واحد را در جایی استفاده کنید که واقعاً مناسب آن باشد، نه فقط برای اینکه همه واحدها را در پروژه قرار داده باشید.

هدف این تمرین این است که بتوانید تشخیص دهید:

«برای این اندازه، واحد نسبی بهتر است یا مقدار ثابت؟»

نکات مهم این مقاله

بعد از مطالعه این مقاله باید بتوانید:

• مفهوم واحد اندازه‌گیری در CSS را توضیح دهید.

• تفاوت واحد مطلق و نسبی را بدانید.

• از px استفاده کنید.

• کاربرد % را درک کنید.

• مفهوم em را بدانید.

• مفهوم rem را بدانید.

• تفاوت em و rem را توضیح دهید.

• از vw استفاده کنید.

• از vh استفاده کنید.

• با vmin و vmax آشنا باشید.

• مفهوم viewport را بدانید.

• تفاوت 100% و 100vw را درک کنید.

• برای یک پروژه واقعی واحد مناسب انتخاب کنید.

• چند واحد مختلف را در یک Layout ترکیب کنید.

جمع‌بندی

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

در این مقاله با واحدهای مهمی مانند px، %، em، rem، vw و vh آشنا شدیم. یاد گرفتیم em با اندازه فونت context خود ارتباط دارد، rem بر اساس اندازه فونت عنصر ریشه محاسبه می‌شود و vw و vh به ابعاد viewport وابسته هستند.

همچنین دیدیم که در یک پروژه واقعی معمولاً یک واحد به تنهایی استفاده نمی‌شود. ممکن است عرض یک Container را با درصد، حداکثر عرض آن را با px، فاصله‌ها را با rem و ارتفاع یک Hero را با vh تعیین کنیم.

در ادامه دوره، این واحدها بارها در طراحی Layout و Responsive Design استفاده خواهند شد؛ بنابراین بهتر است قبل از ورود به مباحث بعدی، تفاوت آن‌ها را کاملاً درک کرده باشید.