همهٔ واحدهای CSS: مطلق، وابسته به فونت، وابسته به viewport، توابع سیال و واحدهای زاویه، زمان و وضوح — اینکه هر واحد نسبت به چه چیزی سنجیده میشود و چه زمانی باید از آن استفاده کنید.
واحدهای مطلق (px، pt) بدون توجه به زمینه اندازهای ثابت دارند؛ واحدهای نسبی (rem، vw، %) نسبت به یک مقدار مرجع مقیاس میگیرند. برای اندازهٔ فونت rem را ترجیح دهید: این واحد تنظیم اندازهٔ فونت ریشه توسط کاربر را رعایت میکند، بنابراین تایپوگرافی شما انتخاب دسترسپذیری او را میپذیرد. برای تایپوگرافی سیالی که با viewport بزرگ و کوچک میشود اما هرگز از حداقل یا حداکثر عبور نمیکند از clamp() استفاده کنید.
جدول مرجع · 38 مورد
واحدهای CSSExplained
38 of 38 rows
مطلق
1/96 اینچ (پیکسل مرجع CSS).
اندازهگذاری ثابت رابط کاربری: حاشیهها، خطوط بسیار نازک، ابعاد آیکونها.
border: 1px solid #000;
1/72 اینچ (1pt = 1.333px).
استایلشیتهای چاپ، جایی که اندازهها به کاغذ فیزیکی نگاشت میشوند.
font-size: 12pt;
1 سانتیمتر (≈37.8px).
چیدمانهای چاپی که به اندازههای واقعی نیاز دارند.
margin: 2cm;
1 میلیمتر (≈3.78px).
اندازهگیریهای دقیق چاپ.
padding: 5mm;
1 اینچ (96px = 2.54cm).
چیدمانهای چاپی با اندازههای اینچی.
margin: 1in;
وابسته به فونت
اندازهٔ فونت خودِ عنصر (به ارث رسیده از والد).
فاصلهگذاریای که همراه با متن پیرامون مقیاس میشود.
padding: 1em;
اندازهٔ فونت عنصر ریشه (همان عنصر html).
اندازهٔ فونتها: تنظیم اندازهٔ فونت ریشهٔ کاربر را رعایت میکند.
font-size: 1.25rem;
پهنای پیشروی نویسهٔ '0' در فونت فعلی.
تعیین طول خط خوانا (تعداد نویسه در هر خط).
max-width: 70ch;
ارتفاع x فونت فعلی (ارتفاع حرف کوچک 'x').
سنجههای عمودی وابسته به قلم.
line-height: 2ex;
ارتفاع کپیتال فونت فعلی (ارتفاع حرف بزرگ).
سنجههای عمودی متناسب با حروف بزرگ، فشردهتر از ex.
padding-top: 0.5cap;
پهنای پیشروی نویسهٔ ایدهنگار '水' (آب) در فونت فعلی.
اندازهگذاریای که یک خانهٔ نویسهٔ CJK را دنبال میکند.
width: 4ic;
ارتفاع خط محاسبهشدهٔ خودِ عنصر.
اندازهگذاری عناصر بر پایهٔ خطوط کامل متن.
height: 3lh;
ارتفاع خط عنصر ریشه.
فاصلهگذاری بر حسب مضربهای ارتفاع خط پایهٔ سند.
margin-block: 2rlh;
وابسته به viewport
مقدار همان ویژگی در والد.
چیدمانهای سیال با اندازهگذاری بر پایهٔ عنصر دربرگیرنده.
width: 50%;
1٪ از پهنای viewport.
بخشهای تمامعرض با اندازهگذاری بر پایهٔ پهنای صفحه.
width: 100vw;
1٪ از ارتفاع viewport.
بخشهای hero یا لایههای پوشانندهٔ کل ارتفاع صفحه.
height: 100vh;
1٪ از بُعد کوچکتر viewport.
اندازهگذاری عناصر برای جا شدن در صفحه در هر جهت.
font-size: 5vmin;
1٪ از بُعد بزرگتر viewport.
پر کردن محور غالب viewport.
font-size: 5vmax;
1٪ از ارتفاع viewport کوچک (رابط مرورگر کاملاً نمایان).
بخشهای تمامارتفاع موبایلی که بالای رابط بازشدهٔ مرورگر جا میشوند.
height: 100svh;
1٪ از ارتفاع viewport بزرگ (رابط مرورگر پنهان).
پسزمینههایی که حتی هنگام جمع شدن رابط مرورگر باید صفحه را بپوشانند.
height: 100lvh;
1٪ از ارتفاع پویای viewport، که رابط مرورگر را هنگام پدیدار و ناپدید شدن دنبال میکند.
راهحل موبایلی مشکل 100vh: ارتفاع با پدیدار شدن رابط مرورگر تغییر میکند.
height: 100dvh;
1٪ از پهنای viewport کوچک.
معادل پهنایی svh برای باریکترین حالت viewport.
width: 100svw;
1٪ از پهنای viewport بزرگ.
معادل پهنایی lvh برای پهنترین حالت viewport.
width: 100lvw;
1٪ از پهنای پویای viewport، که رابط مرورگر را دنبال میکند.
معادل پهنایی dvh وقتی viewport همراه با رابط مرورگر تغییر اندازه میدهد.
width: 100dvw;
1٪ از اندازهٔ viewport در امتداد محور درونخطی (پهنا در حالتهای نوشتاری افقی).
اندازهگذاری viewport که جهت نوشتن را دنبال میکند.
width: 50vi;
1٪ از اندازهٔ viewport در امتداد محور بلوکی (ارتفاع در حالتهای نوشتاری افقی).
اندازهگذاری viewport که در حالتهای نوشتاری عمودی درست میماند.
height: 50vb;
سیال
یک مقدار ترجیحی محدودشده میان یک کمینه و یک بیشینه.
تایپوگرافی سیالی که هرگز از حداقل یا حداکثر عبور نمیکند.
width: clamp(320px, 80vw, 1100px);
کوچکترین آرگومانهای جدا شده با ویرگول.
محدود کردن یک اندازه تا هرگز از بیشینه فراتر نرود.
width: min(100%, 600px);
بزرگترین آرگومانهای جدا شده با ویرگول.
اعمال اندازهٔ کمینهای که با viewport بزرگ میشود.
width: max(50%, 300px);
زاویه
1/360 یک دایرهٔ کامل.
تبدیلهای چرخش و موقعیتهای زاویهٔ گرادیان.
transform: rotate(45deg);
رادیان؛ 1rad ≈ 57.2958deg.
زاویههای حاصل از محاسبات ریاضی، مانند تبدیلهای تولیدشده.
transform: rotate(1.5708rad);
گراد؛ 400grad = یک دایرهٔ کامل.
مقادیر زاویهای قدیمی یا به سبک مساحی.
transform: rotate(100grad);
1turn = یک دایرهٔ کامل 360 درجهای.
چرخشهای کامل یا نیمه که در یک نگاه خوانده میشوند.
transform: rotate(0.5turn);
زمان
یک ثانیه.
مدتزمان انیمیشنها و ترنزیشنها.
transition: opacity 0.3s;
یک میلیثانیه (1s = 1000ms).
انیمیشنها و تأخیرهای کوتاه بازخورد رابط.
animation-duration: 150ms;
وضوح
تعداد نقطه در هر اینچ خروجی.
مدیاکوئریهای وضوح برای چاپ.
@media (min-resolution: 300dpi)
نقطه به ازای هر واحد px؛ 1dppx برابر نمایشگر استاندارد 96dpi است.