هر یکای CSS را مرور کنید — مطلق (px، cm، pt)، نسبی به فونت (em، rem، ch)، viewport (vw، dvh)، container-query، شبکه (fr)، زاویه، زمان و وضوح — در یک مرجع قابل جستجو و فیلتر بر اساس نوع، با توضیح، یادداشت «چه زمانی استفاده شود» و توکن‌های آمادهٔ کپی. در مرورگر، رایگان.

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

هیچ یکایی با جستجوی شما مطابقت ندارد.
یک یکا یا دستهٔ دیگر را امتحان کنید — مثلاً rem، dvh، fr یا angle.

درباره مرجع یکاهای CSS

مرجع واحدهای CSS هر واحدی که این زبان ارائه می‌دهد را مستند می‌کند؛ در مجموع 45 واحد؛ سازمان‌دهی‌شده بر اساس نوع: واحدهای مطلق مانند px، cm و pt؛ واحدهای نسبی به فونت مانند em، rem، ch و lh؛ واحدهای viewport از vw و vh تا جدیدترهای svh، lvh و dvh؛ واحدهای پرسمان کانتینر مانند cqw و cqi؛ واحد fr شبکه؛ به‌علاوه زاویه، زمان، رزولوشن و درصد.

هر کارت بیش از یک تعریف به شما می‌دهد: توکن واحد با فونت تک‌فاصله قابل کپی، نام کامل آن، دسته‌بندی آن، توضیحی ساده از نحوه محاسبه آن، و یادداشت عملی «چه زمانی استفاده کنیم» که می‌گوید کجا این واحد جایگاه خودش را پیدا می‌کند و کجا واحد دیگری بهتر کار می‌کند.

جستجو با توکن‌ها، نام‌ها و معناها مطابقت دارد، بنابراین rem، viewport width و root همگی واحدهای خود را می‌یابند، و تراشه‌های نوع، شبکه را به یک خانواده فیلتر می‌کنند. همه‌چیز در مرورگر شما از یک مرجع داخلی اجرا می‌شود، بدون ارسال چیزی به سرور.

نحوه استفاده از مرجع یکاهای CSS

  1. یک واحد را بر اساس توکن، نام یا معنا جستجو کنید؛ برای مثال rem، viewport width یا angle.
  2. از تراشه‌های نوع برای فیلترکردن شبکه به واحدهای مطلق، نسبی به فونت، viewport، کانتینر، شبکه، زاویه، زمان، رزولوشن یا درصد استفاده کنید.
  3. توضیح هر واحد و یادداشت «چه زمانی استفاده کنیم» آن را بخوانید تا واحد درست را انتخاب کنید.
  4. روی دکمه کپی کلیک کنید تا توکن واحد را برای فایل استایل خود بردارید.

سوالات متداول

برای اندازه فونت و هرچیزی که باید با اندازه متن ترجیحی کاربر مقیاس شود از rem استفاده کنید؛ rem اندازه فونت ریشه را دنبال می‌کند، بنابراین تنظیمات دسترس‌پذیری مرورگر کار می‌کنند. برای چیزهایی که باید نوری ثابت بمانند، مانند حاشیه‌های موئی، از px استفاده کنید.

em نسبت به اندازه فونت خود عنصر جاری است، بنابراین عناصر تودرتو مقدار را ترکیب می‌کنند؛ rem همیشه نسبت به عنصر ریشه است و نتایج قابل پیش‌بینی می‌دهد. به همین دلیل rem به انتخاب پیش‌فرض برای فاصله‌گذاری و مقیاس‌های تایپ تبدیل شده است.

مرورگرهای موبایل نوارابزارهای خود را نشان و پنهان می‌کنند و ارتفاع قابل مشاهده را تغییر می‌دهند، در حالی که vh به اندازه بزرگ‌تر چیدمان ثابت می‌ماند. واحد پویای dvh ارتفاع واقعی قابل مشاهده را همراه با حرکت نوارابزارها دنبال می‌کند، و svh/lvh به کوچک‌ترین و بزرگ‌ترین حالت‌ها متصل می‌شوند.

fr فضای آزاد یک کانتینر شبکه را بر اساس کسر توزیع می‌کند: grid-template-columns: 2fr 1fr به ستون اول دو برابر عرض باقی‌مانده ستون دوم می‌دهد، پس از کسرکردن مسیرهای ثابت و فاصله‌ها. این واحد فقط داخل تعاریف مسیر شبکه وجود دارد.

آن‌ها عناصر را نسبت به نزدیک‌ترین کانتینر پرسمان اندازه می‌دهند نه نسبت به viewport: cqw یک درصد از عرض کانتینر است، cqi یک درصد از اندازه خطی آن. این واحدها به یک کامپوننت اجازه می‌دهند مستقل از اندازه صفحه، به جعبه‌ای که در آن قرار دارد مقیاس شود.

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

اشتراک‌گذاری
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.
گزارش مشکل

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.