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

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

em قدیمی‌ترین واحد نسبی در CSS است و واحدی که بیش از همه بحث به راه می‌اندازد. از فایل طراحی اندازه‌ای بر حسب پیکسل دارید، 20 px فاصلهٔ داخلی یک دکمه، 14 px فاصله کنار یک آیکون، 36 px برای یک عنوان، و می‌خواهید آن را به em بنویسید تا از متنی که به آن تعلق دارد پیروی کند. وقتی px را به em تبدیل می‌کنید، پرسش مشخصی می‌پرسید: این اندازه چند برابر اندازهٔ فعلی قلم است؟ پاسخ به عددی بستگی دارد که صفحه نمی‌تواند حدس بزند، یعنی اندازهٔ قلم در جایی که مقدار به کار می‌رود، پس مبدل آن عدد را در یک فیلد می‌گیرد و آشکارا از آن استفاده می‌کند.

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

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

فرمول و مبنا

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

فرمول یک تقسیم است: em = px ÷ base. با مبنای 16 px، مقدار 24 px می‌شود 1.5 em، مقدار 8 px می‌شود 0.5 em و 20 px می‌شود 1.25 em. صفحه مبنا را کنار نتیجه نشان می‌دهد، مثل 24 px = 1.5 em (16 px)، تا ببینید چه فرض شده است. محاسبه همان محاسبهٔ rem است. معنا فرق می‌کند.

مبنا چیست

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

پیش‌فرض وقتی نمی‌دانید

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

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

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

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

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

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

گرد کردن

تقسیم بر 16 برای بسیاری از اندازه‌ها مقدارهای تمیز و برای بعضی اعشارهای تکرارشونده می‌دهد. مقداری مثل 0.8125 em در شیوه‌نامه اشکالی ندارد، اما اگر اندازهٔ دقیق مهم نیست ممکن است ترجیح دهید به 0.8 یا 0.85 گرد کنید. جایی که دقت مهم است رقم کامل را نگه دارید.

تلهٔ تو در تو بودن

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

فرض کنید فهرستی font-size: 0.875em دارد و آیتم‌هایش هم font-size: 0.875em دارند. فهرست 87.5% والدش است. هر آیتم 87.5% فهرست است که حدود 76.6% والد می‌شود. فهرستی که داخل یک آیتم تو در تو باشد دوباره کوچک می‌شود، به حدود 67%. بعد از سه سطح متن بسیار کوچک است و کسی این را عمداً ننوشته. منظور از اینکه می‌گویند em انباشته می‌شود همین است.

چرا هنگام تبدیل px به em مهم است

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

چگونه از غافلگیری جلوگیری کنیم

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

اندازه‌های رایج

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

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

تغییر مبنا برای هماهنگی با عنصر

اگر مبنا را برای دکمه‌ای کوچک روی 14 بگذارید، جدول عوض می‌شود: 14 px حالا 1 em است، 7 px برابر 0.5 em و 21 px برابر 1.5 em. امتحان کنید و می‌بینید فاصلهٔ داخلی 1.5 em در دکمه‌ای 14 px اندازهٔ پیکسلی متفاوتی از دکمه‌ای 18 px دارد و چرا این مفید است.

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

مقدار پیکسلی را تایپ کنید

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

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

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

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

رقم را با واحدش در CSS خود به کار ببرید، مثل padding: 1.25em. عدد بدون واحد برای بیشتر ویژگی‌ها معتبر نیست.

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

em در حروف سربی

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

پیکسل و rem

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

جایی که em انتخاب درست است

فاصلهٔ داخلی دکمه‌ها و فیلدهای فرم

دکمه‌ای با padding: 0.5em 1em در هر اندازهٔ متن از نظر تناسب یکسان به نظر می‌رسد. برچسب را بزرگ‌تر کنید و کل دکمه با آن بزرگ می‌شود، که همان چیزی است که از مؤلفه‌ای می‌خواهید که ممکن است هم در نوار ابزار و هم در بنر اصلی استفاده شود.

فاصله کنار آیکون‌ها

آیکونی که عنوانی بعد از آن می‌آید به فاصله‌ای نیاز دارد که با عنوان مقیاس شود. margin به اندازهٔ 0.4em این کار را می‌کند؛ margin به اندازهٔ 6px نمی‌کند.

حاشیه‌های اطراف عنوان‌ها و پاراگراف‌ها

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

کوئری‌های رسانه

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

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

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

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

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

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

انتظار یک رقم برای کل مؤلفه

مؤلفه‌ای که شامل متن‌هایی با اندازه‌های مختلف است برای بخش‌هایش مقدار em یگانه‌ای ندارد. هر بخش را با مبنای خودش تبدیل کنید.

قاطی کردن em و rem برای یک ویژگی

padding برابر 1rem کنار margin برابر 1em مجاز است و اغلب گیج‌کننده. قاعده‌ای انتخاب کنید، مثلاً rem برای اندازهٔ قلم و em برای فاصله، و به آن پایبند بمانید.

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

16 px چند em است؟

یک، اگر اندازهٔ قلم در جا 16 px باشد. اگر اندازهٔ قلم عنصر 20 px باشد، 16 px برابر 0.8 em است.

آیا em از rem بهتر است؟

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

چرا فاصلهٔ داخلی من بزرگ‌تر از انتظار است؟

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

آیا می‌توانم از اعشار استفاده کنم؟

بله. مقدارهایی مثل 0.625em و 1.333em عادی‌اند.

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

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

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

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

انتخاب هوشمندانه هنگام تبدیل px به em

تصمیم بگیرید مقدار به چه چیزی تعلق دارد

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

قصد خود را در یک توضیح بنویسید

خطی مثل padding: 0.75em 1.25em; /* 12px 20px at 16px */ استدلال را آشکار می‌کند. وقتی بعدها اندازهٔ قلم تغییر کند، می‌دانید عددها قرار بود چه باشند.

اندازهٔ قلم مؤلفه را در یک جا نگه دارید

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

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

px را به em در هر بار یک مؤلفه تبدیل کنید

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

ماشین‌حساب را برای مقدارهای نامعمول به کار ببرید، نه گرد

مقدارهایی مثل 8، 16 و 24 پیکسل در مبنای 16 به عددهای em تمیز تبدیل می‌شوند. مقدارهای نامعمول مثل 22 یا 13 اعشارهای بلند می‌دهند. وقتی برای این‌ها px را به em تبدیل می‌کنید، تصمیم بگیرید طراحی واقعاً رقم دقیق را می‌خواهد یا نزدیک‌ترین مقدار em گرد به همان اندازه خوب است. طراح‌ها اغلب با گرد کردن راضی‌اند و شیوه‌نامهٔ مرتب نگه‌داری آسان‌تری دارد.

مبنا را ثبت کنید

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

با معادل rem مقایسه کنید

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

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

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

یک مثال عملی

فرض کنید برچسب دکمه 14 px است و طراحی به دکمه 10 px فاصلهٔ داخلی عمودی و 20 px فاصلهٔ داخلی افقی می‌دهد. 14 را به عنوان مبنا تایپ می‌کنید، 10 را و 0.714 em را می‌خوانید، 20 را تایپ می‌کنید و 1.429 em را می‌خوانید. در شیوه‌نامه می‌نویسید padding: 0.714em 1.429em. وقتی همین دکمه در بنر اصلی با برچسب 18 px به کار می‌رود، فاصلهٔ داخلی 12.9 px و 25.7 px می‌شود، متناسب. اگر 10px و 20px نوشته بودید، دکمه دور متن بزرگ‌تر باریک به نظر می‌رسید.

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

پیش از تبدیل

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

هنگام تبدیل

مقدار پیکسلی و مبنای درست را تایپ کنید و رقم em را با واحدش کپی کنید.

پس از تبدیل

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

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

استفاده از اندازهٔ ریشه به عنوان مبنا برای padding

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

استفاده از em برای هر اندازهٔ قلم

اندازه‌های قلم em تو در تو انباشته می‌شوند و شما را غافلگیر می‌کنند. برای اندازهٔ قلم از rem استفاده کنید.

گرد کردن به عددی ظاهراً مرتب اما نادرست

1.43 وقتی در قلم بزرگ ضرب شود با 1.5 یکی نیست. به اندازهٔ کافی رقم نگه دارید.

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

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

خلاصه

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