تبدیل em به px Em ↔ Pixels رایگان آنلاین امن

چرا em را به px تبدیل می‌کنید

یک شیوه‌نامه روی یک عنوان margin-bottom: 0.75em می‌گوید، روی یک دکمه padding: 0.4em 0.9em و برای یک بلوک متن line-height برابر 1.3em. این مقدارها خوب و انعطاف‌پذیرند و تقریباً غیرممکن است آنها را مجسم کرد. این حاشیه چند پیکسل است؟ آیا فاصلهٔ داخلی دکمه با 6 px و 14 px در فایل طراحی می‌خواند؟ برای پی بردن به این، em را به px تبدیل می‌کنید: در اندازهٔ قلمی که em به آن اشاره دارد ضرب می‌کنید و پاسخ را به واحدی می‌خوانید که ابزارهای طراحی به کار می‌برند. این پرسشی است که توسعه‌دهندگان هنگام بازبینی کد، سنجیدن یک ساخت در برابر ماکت، رفع اشکال فاصله‌گذاری یا تحویل یک مؤلفهٔ تمام‌شده به کسی که با پیکسل فکر می‌کند می‌پرسند.

em دشوارترین واحد CSS برای تبدیل است، چون مقدار ثابتی ندارد. em اندازهٔ قلمی است که در محل استفاده از مقدار برقرار است، یا برای خود ویژگی font-size اندازهٔ قلم والد. پس 1.5 em ممکن است در یک جا 24 px باشد و در جای دیگر 36 px، در همان شیوه‌نامه و از همان قاعده. بنابراین مبدل حدس نمی‌زند. اندازهٔ قلمی را که em به آن اشاره دارد می‌پرسد، کنار پاسخ نشان می‌دهد و با آن محاسبه می‌کند. اگر اندازه را نمی‌دانید، بخش‌های زیر توضیح می‌دهند چگونه آن را در مرورگرتان پیدا کنید.

محاسبه در مرورگر شما انجام می‌شود و چیزی بارگذاری نمی‌شود. در ادامه فرمول، چگونگی پیدا کردن پایهٔ درست، آنچه تبدیل نگه می‌دارد و آنچه نمی‌تواند نگه دارد، چگونگی ضرب شدن مقدارهای em تودرتو، زمان‌هایی که توسعه‌دهندگان باید em را به px تبدیل کنند و چند عادت را می‌یابید که شیوه‌نامهٔ مبتنی بر em را قابل فهم نگه می‌دارند.

فرمول و پایه

px برابر است با em ضرب در اندازهٔ قلم

فرمول یک ضرب است: px = em × base. با پایهٔ 16 px، 1.5 em می‌شود 24 px، 0.75 em می‌شود 12 px و 2 em می‌شود 32 px. صفحه پایه را کنار نتیجه چاپ می‌کند، پس خطی مانند 1.5 em = 24 px (16 px) دقیقاً می‌گوید چه فرض شده است. اگر اندازهٔ قلم عنصر 20 px است، 20 را تایپ کنید و 1.5 em می‌شود 30 px.

پیدا کردن پایه در مرورگر شما

ابزارهای توسعه‌دهنده را باز کنید، عنصر را انتخاب کنید و به اندازهٔ قلم محاسبه‌شدهٔ آن نگاه کنید. این همان عددی است که برای هر ویژگی غیر از font-size باید در فیلد پایه تایپ کنید. برای خود font-size، به‌جای آن والد را انتخاب کنید و اندازهٔ محاسبه‌شدهٔ آن را بخوانید. چند ثانیه طول می‌کشد و حدس زدن را به‌کلی از میان برمی‌دارد.

وقتی نمی‌توانید صفحه را ببینید

اگر کد را بدون صفحه می‌خوانید، زنجیرهٔ اندازه‌های قلم را از عنصر به بالا دنبال کنید: font-size خود عنصر اگر دارد، در غیر این صورت font-size والد آن و همین‌طور تا ریشه، که 16 px است مگر آنکه شیوه‌نامه یا خواننده آن را تغییر داده باشد. جایی که اندازه‌ای به em داده شده، در طول زنجیره ضرب کنید. این کار خسته‌کننده است، به همین دلیل بیشتر تیم‌ها برای اندازهٔ قلم‌ها به rem رو می‌آورند.

آنچه تبدیل نگه می‌دارد و آنچه نمی‌تواند

نسبت به متن را نگه می‌دارد

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

نمی‌تواند یک پاسخ برای کل صفحه بدهد

اینجا جایی است که باید مراقب بود: em نسبت به اندازهٔ قلم خود عنصر است، یا برای font-size نسبت به والد آن، نه نسبت به ریشه. پس همان 1.5 em درون عنصری 16 px برابر 24 px است و درون عنصری 24 px برابر 36 px، و em درون em ضرب می‌شود. عدد روی صفحه برای پایهٔ داخل فیلد درست است و برای هیچ چیز دیگر. اگر یک عدد می‌خواهید که همه‌جا برقرار باشد، rem برای همین است. برای مقایسهٔ این دو، rem را به px تبدیل کنید و ببینید یک واحد نسبی به ریشه چگونه ثابت می‌ماند.

گرد کردن

ضرب در پایه‌ای با عدد صحیح برای بیشتر مقدارها نتیجهٔ دقیق می‌دهد. اگر پایه اعشاری باشد، برای مثال 13.5 px، مقداری مانند 1.2 em برابر 16.2 px می‌شود. مرورگرها پیکسل‌های کسری را مدیریت می‌کنند، ولی وقتی پیکسل‌های صحیح لازم دارید، برای یک حاشیهٔ بسیار نازک یا یک آیکون روی شبکه، عمداً گرد کنید و ببینید چگونه به نظر می‌رسد.

مقدارهای em تودرتو چگونه ضرب می‌شوند

فهرستی درون فهرست

صفحه‌ای را در نظر بگیرید که متن بدنهٔ آن 16 px است. یک فهرست font-size: 0.875em دارد، که 14 px است. آیتم‌های درون آن هم font-size: 0.875em دارند، که 14 × 0.875 = 12.25 px است. فهرستی درون یک آیتم دوباره همین کار را می‌کند: 10.7 px. سه سطح پایین‌تر متن ریز است و هیچ‌کس تصمیم نگرفته که چنین باشد. وقتی em را برای یک مؤلفه به px تبدیل می‌کنید و پاسخ بیش از حد کوچک به نظر می‌رسد، تودرتویی نخستین چیزی است که باید بررسی کنید.

بالا رفتن از زنجیره

برای دانستن اندازهٔ پیکسلی واقعی em تودرتو، پایه را در هر مقدار در مسیر پایین ضرب کنید: 16 × 0.875 × 0.875 = 12.25. مبدل هر بار یک گام را انجام می‌دهد. برای یک زنجیره، مقدار اول را تبدیل کنید، پاسخ را به‌عنوان پایه برای دومی به کار ببرید و ادامه دهید. این همان حسابی است که مرورگر انجام می‌دهد.

چگونه جلوی انباشته شدن را بگیریم

برای اندازهٔ قلم‌ها rem به کار ببرید تا هر اندازه به ریشه اشاره کند، و em را برای فاصله‌گذاری نگه دارید تا padding و margin متن عنصر خودشان را دنبال کنند. در این ترکیب چیزی انباشته نمی‌شود و مقدارهای em که تبدیل می‌کنید همیشه نسبت به اندازهٔ قلمی‌اند که بلافاصله می‌توانید بخوانید.

مقدارهای رایج

جدول پایین صفحه

صفحه جدولی از مقدارهای پیکسلی دارد که عددهای رایج em در پایه‌ای که تعیین کرده‌اید با آنها مطابقت می‌کنند: 0.5 em برابر 8 px است، 0.625 برابر 10، 0.75 برابر 12، 0.875 برابر 14، 1 برابر 16، 1.125 برابر 18، 1.25 برابر 20، 1.5 برابر 24، 2 برابر 32، 3 برابر 48 و 4 برابر 64. در پایهٔ پیش‌فرض این‌ها همان عددهای rem هستند. پایه را عوض کنید و جدول همراه آن عوض می‌شود، که راه خوبی برای دیدن کار واقعی em است.

دو پایه را کنار هم امتحان کنید

1.5 را با پایهٔ 14 تایپ کنید، سپس با پایهٔ 20. 21 و 30 پیکسل می‌گیرید. این تمام تفاوت em و rem در یک آزمایش است: یک عدد، دو عنصر، دو اندازه.

چگونه اینجا em را به px تبدیل کنیم

مقدار em را تایپ کنید

اندازه را به em در فیلد اول وارد کنید. اعشار پذیرفته می‌شود، پس 0.714 همان‌قدر کار می‌کند که 1.

اندازهٔ قلمی را که em به آن اشاره دارد تعیین کنید

اندازهٔ قلم عنصر را تایپ کنید، یا اندازهٔ قلم والد آن اگر ویژگی font-size است. اگر مطمئن نیستید، 16 را بگذارید و نتیجه را تقریبی بدانید.

مقدار پیکسلی را بخوانید

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

این واحدها از کجا آمده‌اند

em

em از وب قدیمی‌تر است. در حروف سربی عرض یک قطعهٔ ریخته‌گری بود که از حرف بزرگ M نام گرفته، و حروف‌چینان هنوز از خط تیرهٔ em و فاصلهٔ em سخن می‌گویند. در CSS یعنی اندازهٔ قلم برقرار، که دلیل تغییر آن هنگام تودرتو کردن عنصرهاست.

پیکسل و rem

وقتی نمایشگرها دیگر چگالی قابل پیش‌بینی نداشتند، صفحه‌ای که با پیکسل‌های واقعی اندازه‌گیری شده بود با تیزتر شدن صفحه‌ها کوچک می‌شد. پس پیکسل CSS به‌عنوان یک طول مرجع دوباره تعریف شد: حدود 1/96 اینچ، دیده‌شده از یک فاصلهٔ راحت برای خواندن. rem اضافه شد تا از انباشته شدن em بگریزد: em عنصر ریشه است و هرگز ضرب نمی‌شود. اگر با هر دو کار می‌کنید، برای رفتن به جهت دیگر px را به em تبدیل کنید.

چه وقت توسعه‌دهندگان em را به px تبدیل می‌کنند

سنجیدن یک ساخت در برابر فایل طراحی

طراح فایلی را به پیکسل تحویل می‌دهد و کد به em است. برای بررسی اینکه صفحه می‌خواند، با اندازهٔ قلم هر مؤلفه em را به px تبدیل می‌کنید. دکمه‌ای با برچسب 14 px و فاصلهٔ داخلی 0.714em 1.429em باید 10 px و 20 px دربیاید، و اگر طراحی 12 و 24 می‌گوید، یکی از این دو اشتباه است.

رفع اشکال فاصله‌گذاری

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

خواندن کد ناآشنا

شیوه‌نامه‌های به ارث رسیده پر از مقدارهای em هستند که باید اندازهٔ پیکسلی‌شان را بازسازی کنید. تبدیل چند مورد اصلی، با پایه‌های درست، نقشه‌ای از طراحی به شما می‌دهد.

نوشتن مستندات و آزمون‌ها

کسانی که صفحه را آزمایش می‌کنند آنچه می‌بینند به پیکسل توصیف می‌کنند. توسعه‌دهنده‌ای که می‌گوید فاصلهٔ داخلی 0.9em است برای آزمونگر معنای چندانی ندارد؛ 12.6 px معنا دارد. تبدیل باعث می‌شود دو طرف همدیگر را بفهمند.

دام‌ها هنگام تبدیل em به px

استفاده از پایهٔ نادرست

رایج‌ترین خطا. برای font-size اندازهٔ والد را به کار ببرید؛ برای همهٔ ویژگی‌های دیگر، اندازهٔ خود عنصر را. پیش از تایپ پایه ویژگی را بررسی کنید.

فراموش کردن والدی که به em است

اگر اندازهٔ والد خودش به em باشد، باید زنجیره را دنبال کنید. برای کوتاه کردن کار از مقدار محاسبه‌شده در ابزارهای توسعه‌دهنده استفاده کنید.

فرض اینکه صفحه همان پیکسل‌ها را نشان می‌دهد

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

گرفتن پاسخ به‌عنوان یک قول

اگر خواننده متن را بزرگ کند یا مؤلفه با اندازهٔ قلم دیگری دوباره به کار رود، پیکسل‌ها تغییر می‌کنند، چنان‌که باید. عدد تبدیل‌شده یک وضعیت را توصیف می‌کند، نه همه را.

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

1 em چند پیکسل است؟

به اندازهٔ قلم برقرار: 16 px برای متن بدنهٔ عادی در حالت پیش‌فرض، 24 px درون عنصری 24 px.

2 em چند پیکسل است؟

دو برابر اندازهٔ قلم برقرار. در 16 px می‌شود 32 px.

چرا مرورگر من چیز دیگری نشان می‌دهد؟

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

آیا em همان rem است؟

خیر. em نسبت به عنصر است، rem نسبت به ریشه.

آیا عدد من بارگذاری می‌شود؟

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

چگونه برگردم؟

با px به em، که به‌جای ضرب تقسیم می‌کند.

عادت‌هایی که شیوه‌نامهٔ em را قابل فهم نگه می‌دارند

پایه را توضیح دهید

خطی مانند padding: 0.75em 1.25em; /* 12px 20px at 16px */ چند نویسه هزینه دارد و برای خوانندهٔ بعدی یک تبدیل صرفه‌جویی می‌کند. پایه‌ای را که فرض کرده‌اید ثبت می‌کند.

اندازهٔ قلم را برای هر مؤلفه یک بار تعیین کنید

اندازهٔ قلم مؤلفه را روی عنصر ریشهٔ آن تعریف کنید و درون آن با em به آن اشاره کنید. آنگاه پایه برای هر مقدار در مؤلفه یکسان است و می‌توانید با اطمینان em را در برابر آن به px تبدیل کنید.

em را برای فاصله‌گذاری نگه دارید، rem را برای حروف

این همان تقسیمی است که بیشتر شیوه‌نامه‌ها به آن می‌رسند و حساب را ساده نگه می‌دارد. برای اندازه‌های نسبی به صفحه، px به vw و vw به px ابزارهای مناسب‌اند.

با اندازهٔ متن دیگری آزمایش کنید

اندازهٔ پیش‌فرض متن را در مرورگرتان بالا ببرید و به صفحه نگاه کنید. اگر فاصله‌ها متن را دنبال می‌کنند، مقدارهای em کار می‌کنند. اگر نه، چیزی به پیکسل مانده است.

روشی برای موردهای ناجور

از بیرون به درون کار کنید

وقتی مؤلفه‌ای عمیقاً درون مؤلفه‌های دیگر است و مقدارهای em آن گیج‌کننده به نظر می‌رسند، از بیرونی‌ترین عنصری شروع کنید که اندازه‌اش را می‌دانید و به سمت داخل کار کنید، هر بار یک سطح را تبدیل کنید. در حین کار هر اندازهٔ پیکسلی را در یک یادداشت بنویسید. پس از دو یا سه سطح کل زنجیره روی کاغذ است و می‌توانید دقیقاً ببینید عدد شگفت‌انگیز از کجا آمده است. یک دقیقه طول می‌کشد و جای یک ساعت حدس زدن را می‌گیرد.

تصمیم بگیرید ساده کنید یا نه

اگر برای فهمیدن یک چیدمان باید em را از چهار سطح به px تبدیل کنید، شیوه‌نامه دارد چیزی به شما می‌گوید. انتقال اندازهٔ قلم‌ها به rem را در نظر بگیرید تا هر کدام به ریشه اشاره کنند و فقط فاصله‌گذاری به em بماند. صفحه همان‌طور به نظر می‌رسد و سال بعد خواندنش بسیار آسان‌تر است.

مبدل‌های مرتبط

همین خانوادهٔ ابزارها تبدیل‌های همسایه را پوشش می‌دهد. برای برگشت به em از px به em استفاده کنید. برای اندازه‌های نسبی به ریشه، px به rem و rem به px هست، و برای اندازه‌های نسبی به صفحه، px به vw و vw به px. برای رنگ‌های همان شیوه‌نامه، HEX به RGB و RGB به HEX نمادها را مدیریت می‌کنند.

یک مثال عملی

فرض کنید دارید یک مؤلفهٔ دکمه را بازبینی می‌کنید. برچسب 14 px است، CSS می‌گوید padding: 0.714em 1.429em و فاصلهٔ 0.5em میان یک آیکون و برچسب. 14 را به‌عنوان پایه تایپ می‌کنید، سپس 0.714 و 10 px را می‌خوانید، 1.429 و 20 px را می‌خوانید، 0.5 و 7 px را می‌خوانید. فایل طراحی 10 و 20 و 8 می‌گوید. دو مورد از سه مورد می‌خوانند، پس به فاصله نگاه می‌کنید: 8 px در پایهٔ 14 برابر 0.571 em می‌شود و کسی آن را به 0.5 گرد کرده است. در بازبینی مطرحش می‌کنید و اصلاح فقط یک عدد است.

یک فهرست بررسی کوتاه

پیش از تبدیل

اندازهٔ قلمی را که em به آن اشاره دارد از ابزارهای توسعه‌دهنده یا از زنجیرهٔ اندازه‌های قلم در کد پیدا کنید.

هنگام تبدیل

مقدار em را تایپ کنید، پایه را تعیین کنید و پیکسل‌ها را بخوانید و به پایه‌ای که کنار نتیجه نشان داده شده توجه کنید.

پس از تبدیل

با فایل طراحی مقایسه کنید. اگر عددها فرق دارند، پیش از آنکه به کد شک کنید پایه را بررسی کنید.

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

استفاده از 16 بدون بررسی

فقط وقتی درست است که اندازهٔ قلم عنصر 16 px باشد.

اشتباه گرفتن em با rem

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

فراموش کردن اینکه em انباشته می‌شود

مقداری درون یک عنصر تودرتو نسبت به اندازه‌ای است که شاید ندیده باشید. زنجیره را دنبال کنید.

عددهای شما روی دستگاه شما می‌مانند

محاسبه به‌صورت محلی انجام می‌شود. مقدارهای شما را مرورگر خودتان به کار می‌برد و چیزی به جایی فرستاده نمی‌شود. پس از آن چیزی برای پاک کردن نیست و حساب کاربری‌ای برای ساختن وجود ندارد. این راه ساده برای تبدیل em به px است.

خلاصه

برای تبدیل em به px در اینجا، اندازه را به em و اندازهٔ قلمی را که به آن اشاره دارد تایپ کنید و نتیجه را بلافاصله به پیکسل بخوانید، با فرمول px = em × base. تبدیل نسبت به اندازهٔ قلم برقرار در محل استفاده از مقدار را نگه می‌دارد. نمی‌تواند برای یک صفحه یک پاسخ واحد بدهد: em نسبت به خود عنصر است، یا برای font-size نسبت به والد، پس همان 1.5 em درون عنصری 16 px برابر 24 px است و درون عنصری 24 px برابر 36 px، و em درون em ضرب می‌شود. برای یک عدد که همه‌جا برقرار باشد، rem را به کار ببرید. چیزی بارگذاری نمی‌شود.