تبدیل واحدهای CSS (px به rem، em و vw)
تبدیل px به rem، em، pt، vw، vh و درصد با اندازه‌ی پایه‌ی دلخواه، پیش‌نمایش زنده و جدول مرجع سریع؛ رایگان و آنلاین.
اندازه‌های مرجع
پیش‌نمایش زنده
مرجع سریع (px → rem، اندازهٔ فعلی ریشه)
دربارهٔ این ابزار
تبدیل px به rem و همه‌ی واحدهای CSS
طراح، اندازه‌ها را در فیگما به پیکسل تحویل می‌دهد، اما برای یک سایت دسترس‌پذیر و واکنش‌گرا باید از rem، em یا vw استفاده کنید. حساب کردن دستی این تبدیل‌ها، به‌خصوص وقتی اندازه‌ی پایه‌ی پروژه ۱۶ پیکسل نیست، کند و پرخطاست. با ابزار تبدیل واحدهای CSS تولتولیا کافی است یک مقدار و واحد آن را وارد کنید تا معادلش را هم‌زمان در همه‌ی واحدها ببینید؛ بر اساس اندازه‌ی فونت ریشه، فونت والد و ابعاد صفحه‌ای که خودتان تعیین می‌کنید، نه یک عدد پیش‌فرض.
ویژگی‌های ابزار
- هفت واحد:
px،rem،em،pt، درصد،vwوvh. - اندازه‌های مرجع قابل تنظیم: فونت ریشه برای rem، فونت والد برای em و درصد، و عرض و ارتفاع صفحه برای vw و vh.
- استفاده از اندازه‌ی صفحه‌نمایش شما با یک کلیک.
- پیش‌نمایش زنده برای دیدن اندازه‌ی واقعی متن.
- جدول مرجع سریع px به rem بر اساس اندازه‌ی ریشه‌ی فعلی.
- رایگان و بدون ثبت‌نام.
آموزش استفاده
- مقدار را وارد کنید و واحد فعلی آن را انتخاب کنید.
- اگر پروژه‌ی شما اندازه‌ی فونت ریشه‌ی متفاوتی دارد (مثلاً ۱۰ پیکسل)، آن را در «اندازه‌ی فونت ریشه» وارد کنید.
- برای تبدیل دقیق em و درصد، اندازه‌ی فونت عنصر والد را تنظیم کنید.
- برای vw و vh، عرض و ارتفاع صفحه‌ای را که برای آن طراحی می‌کنید وارد کنید، یا روی «استفاده از اندازه‌ی صفحه‌نمایش من» بزنید.
- نتایج را در پیش‌نمایش زنده بررسی کنید و کپی کنید.
فرمول‌های تبدیل واحدهای CSS
| تبدیل | فرمول | مثال |
|---|---|---|
| px به rem | px ÷ اندازه‌ی فونت ریشه | 24px ÷ 16 = 1.5rem |
| px به em | px ÷ اندازه‌ی فونت والد | 18px ÷ 12 = 1.5em |
| px به vw | (px ÷ عرض صفحه) × ۱۰۰ | 72px ÷ 1440 × 100 = 5vw |
| px به pt | px × ۰٫۷۵ | 16px × 0.75 = 12pt |
جدول تبدیل px به rem (فونت ریشه ۱۶ پیکسل)
| px | rem | px | rem |
|---|---|---|---|
| 10px | 0.625rem | 20px | 1.25rem |
| 12px | 0.75rem | 24px | 1.5rem |
| 14px | 0.875rem | 32px | 2rem |
| 16px | 1rem | 40px | 2.5rem |
| 18px | 1.125rem | 48px | 3rem |
تفاوت rem، em و درصد
- rem: همیشه نسبت به اندازه‌ی فونت عنصر ریشه، یعنی
<html>، محاسبه می‌شود. عمق قرارگیری عنصر در صفحه روی آن اثری ندارد. - em: نسبت به اندازه‌ی فونت عنصر والد محاسبه می‌شود. به همین دلیل یک مقدار em ثابت، بسته به جایی که عنصر قرار گرفته، اندازه‌های پیکسلی متفاوتی دارد؛ رایج‌ترین دلیل خطاهایی از نوع «چرا اندازه‌ی em من درست نیست؟»
- درصد: در
font-sizeدقیقاً مانند em و نسبت به فونت والد عمل می‌کند. - vw و vh: نسبت به عرض و ارتفاع صفحه‌ی مرورگر محاسبه می‌شوند و برای تایپوگرافی سیال کاربرد دارند، اما در صفحه‌های خیلی کوچک یا خیلی بزرگ ممکن است متن را بیش از حد کوچک یا بزرگ کنند.
برای تایپوگرافی سیال و در عین حال کنترل‌شده، vw را با clamp() ترکیب کنید تا اندازه‌ی متن هرگز از یک حداقل و حداکثر عبور نکند:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}کدام واحد را برای چه چیزی استفاده کنیم؟
- اندازه‌ی فونت: rem؛ چون با تغییر اندازه‌ی فونت پیش‌فرض مرورگر توسط کاربر، به‌درستی بزرگ و کوچک می‌شود.
- فاصله‌ی داخلی دکمه‌ها و اجزای وابسته به متن: em؛ تا همراه با اندازه‌ی فونت همان جزء تغییر کند.
- حاشیه‌ها و فاصله‌های کلی صفحه: rem، برای یکدستی در کل سایت.
- بخش‌های تمام‌صفحه و تایپوگرافی سیال: vw و vh، ترجیحاً همراه با
clamp(). - خط‌ها و حاشیه‌های بسیار نازک: px، مثلاً
border: 1px. - شیوه‌نامه‌ی چاپ: pt.
نکته برای سایت‌های فارسی: بسیاری از فونت‌های فارسی در اندازه‌ی یکسان، کوچک‌تر از فونت‌های لاتین به نظر می‌رسند. اگر متن سایت شما کوچک دیده می‌شود، به‌جای تغییر تک‌تک اندازه‌ها، اندازه‌ی فونت پایه را کمی بزرگ‌تر کنید؛ با استفاده از rem، همه‌ی اندازه‌ها به‌طور متناسب تغییر می‌کنند.
این ابزار برای چه کسانی مناسب است؟
- توسعه‌دهندگان فرانت‌اند: برای تبدیل اندازه‌های پیکسلی طراحی به rem.
- طراحان رابط کاربری: برای فهمیدن اینکه اندازه‌ها در کد چطور پیاده می‌شوند.
- توسعه‌دهندگان قالب وردپرس: برای ساخت قالب‌های دسترس‌پذیر و واکنش‌گرا.
- یادگیرندگان CSS: برای درک تفاوت واحدهای نسبی و مطلق.
ابزارهای دیگر CSS و برنامه‌نویسی تولتولیا مثل Border Radius ساز، تست کنتراست رنگ و JSON Formatter و Validator را هم امتحان کنید.
سؤالات متداول
چرا ۱rem همیشه ۱۶ پیکسل نیست؟
یک rem برابر با اندازه‌ی فونت عنصر html است. مرورگرها به‌طور پیش‌فرض آن را ۱۶ پیکسل در نظر می‌گیرند، اما بسیاری از پروژه‌ها آن را تغییر می‌دهند. یک روش رایج، تنظیم آن روی 62.5% (یعنی ۱۰ پیکسل) است تا تبدیل px به rem فقط با تقسیم بر ۱۰ انجام شود.
برای اندازه‌ی فونت از px استفاده کنم یا rem؟
rem. اگر کاربر اندازه‌ی فونت پیش‌فرض مرورگر را برای خوانایی بیشتر بزرگ کند، اندازه‌های rem همراه با آن بزرگ می‌شوند، اما اندازه‌های px ثابت می‌مانند. به همین دلیل بیشتر راهنماهای دسترس‌پذیری rem را توصیه می‌کنند.
هر pt چند پیکسل است؟
در استاندارد ۹۶ DPI که مرورگرها از آن استفاده می‌کنند، هر pt برابر با ۴/۳ پیکسل و هر پیکسل برابر با ۰٫۷۵ pt است. بنابراین ۱۲pt همیشه دقیقاً ۱۶ پیکسل است.
برای محاسبه‌ی vw چه عرضی وارد کنم؟
عرض صفحه‌ای که برای آن طراحی می‌کنید؛ مثلاً ۱۹۲۰ یا ۱۴۴۰ برای دسکتاپ و ۳۷۵ تا ۴۳۰ برای موبایل. مقدار vw فقط نسبت به یک عرض مشخص معنا دارد.
آیا این ابزار برای واحدهای دیگر مثل ch یا dvh هم کار می‌کند؟
خیر. این ابزار هفت واحد پرکاربرد CSS را پوشش می‌دهد. واحدهایی مثل ch، ex یا dvh به فونت یا رفتار خاص مرورگر وابسته‌اند و تبدیل دقیق آن‌ها بدون شرایط واقعی صفحه ممکن نیست.