در حال بارگذاری...
مرجع کامل واحدهای CSS
این مرجع کامل واحدهای CSS برای توسعه‌دهندگان طراحی شده است تا استفاده مؤثر و سریع از واحدها را در پروژه‌های وب تضمین کند. این راهنما همه واحدهای CSS را به‌صورت دسته‌بندی‌شده ارائه می‌کند: واحدهای طول مطلق، واحدهای طول نسبی، واحدهای Viewport، واحدهای پرسش کانتینر، درصد، زاویه، زمان، فرکانس، وضوح، رنگ، توابع و واحدهای Grid. هر واحد شامل توضیح، مثال عملی، کاربردهای واقعی و پشتیبانی مرورگر است. توسعه‌دهندگان می‌توانند با استفاده از این راهنما، در طراحی و پیاده‌سازی سریع، دقیق و قابل فهم برای همه دستگاه‌ها و مرورگرها تصمیمات بهتری بگیرند.
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | پیکسل - پیکسل دستگاه | 1px = 1/96 inch | width: 300px | طراحی رابط، حاشیه‌ها، سایه‌ها | همه مرورگرها |
| cm | سانتی‌متر | 1cm = 37.8px | margin: 2cm | استایل‌های چاپ، اندازه‌های فیزیکی | همه مرورگرها |
| mm | میلی‌متر | 1mm = 3.78px | border: 1mm solid | رسانه چاپ، اندازه‌گیری دقیق | همه مرورگرها |
| in | اینچ | 1in = 96px | page-break-after: 2in | چاپ، اندازه‌های بزرگ | همه مرورگرها |
| pt | پوینت | 1pt = 1.33px | font-size: 12pt | تایپوگرافی، رسانه چاپ | همه مرورگرها |
| pc | پیکا | 1pc = 16px | line-height: 1.5pc | تایپوگرافی چاپ، عرض ستون | همه مرورگرها |
| Q | ربع میلی‌متر | 1Q = 0.25mm | margin: 4Q | چاپ، اندازه‌گیری بسیار دقیق | مرورگرهای مدرن |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | واحد Em | اندازه فونت عنصر والد | font-size: 1.2em | تایپوگرافی، فاصله نسبی متن | همه مرورگرها |
| rem | Root em | اندازه فونت ریشه | margin: 2rem | فاصله ثابت و طرح‌بندی قابل مقیاس | IE9+ |
| ex | ارتفاع x | ارتفاع حرف کوچک x | line-height: 2ex | تایپوگرافی، تراز عمودی | همه مرورگرها |
| ch | عرض کاراکتر | '0' در فونت جاری | width: 40ch | کانتینرهای متن، چیدمان‌های monospace | IE9+ |
| cap | ارتفاع حروف بزرگ | ارتفاع حروف بزرگ | margin-top: 1cap | تایپوگرافی، فاصله عمودی | مرورگرهای مدرن |
| ic | کاراکتر ایدئوگرافیک | عرض کاراکترهای CJK | width: 20ic | تایپوگرافی شرق آسیا | مرورگرهای مدرن |
| lh | ارتفاع خط | ارتفاع خط عنصر | margin: 1lh | ریتم عمودی، فاصله‌ها | مرورگرهای مدرن |
| rlh | ارتفاع خط ریشه | ارتفاع خط عنصر ریشه | padding: 0.5rlh | فاصله عمودی ثابت | مرورگرهای مدرن |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | عرض Viewport | 1% از عرض viewport | width: 50vw | چیدمان تمام عرض، طراحی ریسپانسیو | IE9+ |
| vh | ارتفاع Viewport | 1% از ارتفاع viewport | height: 100vh | سکشن‌های تمام ارتفاع، هرو | IE9+ |
| vmin | کمینه Viewport | 1% از کوچکترین بعد viewport | font-size: 4vmin | عناصر مربع، تایپوگرافی ریسپانسیو | IE9+ |
| vmax | بیشینه Viewport | 1% از بزرگترین بعد viewport | width: 50vmax | چیدمان ریسپانسیو، طراحی تطبیقی | IE9+ |
| vi | Viewport در جهت inline | 1% از viewport در جهت خطی | padding: 2vi | خواص منطقی، چیدمان بین‌المللی | مرورگرهای مدرن |
| vb | Viewport در جهت block | 1% از viewport در جهت بلوک | margin: 3vb | خواص منطقی، حالت نوشتاری | مرورگرهای مدرن |
| dvw | عرض پویا viewport | 1% از عرض پویا | width: 100dvw | چیدمان موبایل، مدیریت نوار آدرس | مرورگرهای مدرن |
| dvh | ارتفاع پویا viewport | 1% از ارتفاع پویا | height: 100dvh | UI تمام ارتفاع موبایل | مرورگرهای مدرن |
| lvw | عرض بزرگ Viewport | 1% از عرض بزرگ | max-width: 90lvw | چیدمان موبایل، حالت نمایش UI | مرورگرهای مدرن |
| lvh | ارتفاع بزرگ Viewport | 1% از ارتفاع بزرگ | min-height: 100lvh | چیدمان موبایل، حداکثر viewport | مرورگرهای مدرن |
| svw | عرض کوچک Viewport | 1% از عرض کوچک | width: 100svw | چیدمان موبایل، حالت مخفی UI | مرورگرهای مدرن |
| svh | ارتفاع کوچک Viewport | 1% از ارتفاع کوچک | height: 100svh | چیدمان موبایل، حداقل viewport | مرورگرهای مدرن |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | عرض پرسش کانتینر | 1% از عرض کانتینر | width: 50cqw | طراحی ریسپانسیو مبتنی بر کانتینر | مرورگرهای مدرن |
| cqh | ارتفاع پرسش کانتینر | 1% از ارتفاع کانتینر | height: 80cqh | چیدمان کانتینر | مرورگرهای مدرن |
| cqi | پرسش کانتینر در جهت inline | 1% از اندازه inline کانتینر | padding: 2cqi | چیدمان منطقی کانتینر | مرورگرهای مدرن |
| cqb | پرسش کانتینر در جهت block | 1% از اندازه block کانتینر | margin: 1cqb | ابعاد کانتینر در جهت بلوک | مرورگرهای مدرن |
| cqmin | کمینه پرسش کانتینر | 1% از کوچکترین بعد کانتینر | font-size: 3cqmin | تایپوگرافی کانتینر | مرورگرهای مدرن |
| cqmax | بیشینه پرسش کانتینر | 1% از بزرگترین بعد کانتینر | border-radius: 2cqmax | استایل مبتنی بر کانتینر | مرورگرهای مدرن |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | درصد | ویژگی متناظر عنصر والد | width: 50% | چیدمان قابل انعطاف، ریسپانسیو | همه مرورگرها |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | درجه | 360deg = دایره کامل | transform: rotate(45deg) | چرخش، گرادیان | همه مرورگرها |
| grad | گرادیان | 400grad = دایره کامل | transform: rotate(100grad) | محاسبات ریاضی، گرادیان | همه مرورگرها |
| rad | رادیان | 2π rad = دایره کامل | transform: rotate(1.57rad) | تبدیلات ریاضی | همه مرورگرها |
| turn | دور | 1turn = دایره کامل | transform: rotate(0.25turn) | چرخش شهودی، انیمیشن | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | ثانیه | 1s = 1000ms | transition-duration: 2s | انیمیشن، ترنزیشن | همه مرورگرها |
| ms | میلی‌ثانیه | 1000ms = 1s | animation-delay: 500ms | زمان‌بندی دقیق، انیمیشن سریع | همه مرورگرها |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | هرتز | 1Hz = 1 سیکل در ثانیه | Not commonly used in CSS | خصوصیات صوتی (آینده) | محدود |
| kHz | کیلوهرتز | 1kHz = 1000Hz | Not commonly used in CSS | خصوصیات صوتی (آینده) | محدود |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | نقاط در اینچ | نقاط فیزیکی در اینچ | @media (min-resolution: 300dpi) | نمایشگرهای High-DPI، چاپ | IE9+ |
| dpcm | نقاط در سانتی‌متر | نقاط فیزیکی در سانتی‌متر | @media (min-resolution: 118dpcm) | اندازه‌گیری متریک، چاپ | IE9+ |
| dppx | نقاط بر پیکسل | پیکسل‌های دستگاه بر هر پیکسل CSS | @media (min-resolution: 2dppx) | نمایشگر Retina | IE9+ |
| x | مخفف dppx | همانند dppx | @media (min-resolution: 2x) | نمایشگر Retina، سینتکس ساده | مرورگرهای مدرن |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | هگزادسیمال | #RRGGBB / #RGB | color: #ff0000 | رنگ استاندارد | همه مرورگرها |
| rgb() | تابع RGB | rgb(r,g,b) | color: rgb(255,0,0) | کنترل دقیق رنگ | همه مرورگرها |
| rgba() | RGB با آلفا | rgba(r,g,b,a) | background: rgba(255,0,0,0.5) | رنگ شفاف | IE9+ |
| hsl() | تابع HSL | hsl(h,s%,l%) | color: hsl(0,100%,50%) | انتخاب رنگ شهودی | IE9+ |
| hsla() | HSL با آلفا | hsla(h,s%,l%,a) | background: hsla(0,100%,50%,0.5) | HSL شفاف | IE9+ |
| hwb() | تابع HWB | hwb(h w% b%) | color: hwb(0 0% 0%) | مدل رنگ جایگزین | مرورگرهای مدرن |
| lab() | تابع Lab | lab(l a b) | color: lab(50% 20 -30) | فضای رنگ ادراکی | مرورگرهای مدرن |
| lch() | تابع LCH | lch(l c h) | color: lch(50% 40 180) | فضای رنگ استوانه‌ای Lab | مرورگرهای مدرن |
| oklch() | تابع OKLCH | oklch(l c h) | color: oklch(0.5 0.4 180) | فضای رنگ LCH بهبود یافته | مرورگرهای مدرن |
| color() | تابع Color | color(space r g b) | color: color(display-p3 1 0 0) | فضای رنگ گسترده | مرورگرهای مدرن |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | محاسبات ریاضی | ترکیب واحدهای مختلف | width: calc(100% - 20px) | محاسبات ترکیبی | IE9+ |
| min() | کمینه | بازگرداندن کوچکترین مقدار | width: min(100px,50%) | محدودیت ریسپانسیو | مرورگرهای مدرن |
| max() | بیشینه | بازگرداندن بیشترین مقدار | width: max(200px,50%) | حداقل ریسپانسیو | مرورگرهای مدرن |
| clamp() | مقدار محدود | clamp(min,preferred,max) | font-size: clamp(1rem,4vw,2rem) | ریسپانسیو با محدودیت | مرورگرهای مدرن |
| attr() | مقدار صفت | استفاده از مقدار HTML | width: attr(data-width px) | مقادیر داینامیک | پشتیبانی محدود |
| var() | متغیر CSS | استفاده از property سفارشی | color: var(--main-color) | متغیرهای CSS | IE11+ (partial), مرورگرهای مدرن |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | واحد کسری | کسری از فضای موجود | grid-template-columns: 1fr 2fr | CSS Grid، ستون‌های منعطف | IE10+ (-ms-) |
Code Example 15
css
CSS Code
/* ترکیب واحدهای مطلق و نسبی */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* تایپوگرافی ریسپانسیو با clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Viewport units برای چیدمان تمام صفحه */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query units برای استایل‌دهی کامپوننت */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid با واحدهای کسری */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}- برای طراحی مقیاس‌پذیر و قابل دسترسی، از واحدهای نسبی (rem, em, %) استفاده کنید.
- برای فاصله‌دهی یکنواخت در کل طراحی، rem را به em ترجیح دهید.
- استفاده از viewport units (vw, vh) را با دقت انجام دهید زیرا scrollbar را محاسبه نمی‌کنند.
- برای تایپوگرافی ریسپانسیو، clamp() مفید است.
- ترکیب واحدها با calc() برای طراحی‌های پیچیده ریسپانسیو مفید است.
- برای حاشیه‌ها، سایه‌ها و عناصر تزئینی، px مناسب است.
- قبل از استفاده از container query units، در مرورگرهای پشتیبانی‌کننده تست کنید.
- واحد fr در CSS Grid برای چیدمان منعطف و شهودی کاربرد دارد.
- در استفاده از واحدهای جدید (dvh, lvh, svh) به پشتیبانی مرورگر توجه کنید.
- برای چیدمان‌های بین‌المللی، واحدهای منطقی (vi, vb) را مدنظر داشته باشید.
- برای رنگ‌ها، HSL/HSB انتخاب راحت‌تر و انعطاف‌پذیری بالاتر دارند.
- همیشه برای واحدهای جدید در مرورگرهای قدیمی fallback ارائه دهید.
- ترکیب واحدها را در دستگاه‌ها و اندازه‌های مختلف تست کنید.
🧠 دانش خود را بیازمایید
آماده شروع
Reference Knowledge Check
دانش خود را درباره واحدهای CSS و کاربردهای آن‌ها بسنجید.
3
سوالات
70%
برای قبولی
∞
زمان
∞
تلاش‌ها
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود