Px در مقابل Em در مقابل Rem: از کدام واحد CSS باید استفاده کنید؟

اگر در حال توسعه طراحی وب سایت هستید، مهم است که با واحدهای CSS خود سازگار باشید. اما آیا باید از px، em یا rem استفاده کنید؟

شما می خواهید چند واحد CSS را برای سفارشی کردن اندازه فونت متن هنگام ساخت صفحات وب یاد بگیرید. واحدهای زیادی مانند pt، pc، ex و غیره وجود دارد، اما در بیشتر موارد باید روی سه واحد محبوب تمرکز کنید: px، em و rem. بسیاری از توسعه دهندگان معمولاً نمی دانند که چه تفاوت هایی بین این واحدها وجود دارد. بنابراین، در زیر توضیح دقیقی از این واحدها ارائه شده است.

قبل از ادامه، توجه داشته باشید که دو نوع طول واحد وجود دارد: مطلق و نسبی.

طول های مطلق

واحدهای طول مطلق ثابت هستند و طول بیان شده در هر یک از اینها دقیقاً به همان اندازه ظاهر می شود.

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

واحد

شرح

سانتی متر

سانتی متر

میلی متر

میلی متر

که در

اینچ (1 اینچ = 96 پیکسل = 2.54 سانتی متر)

px *

پیکسل (1px = 1/96th از 1in)

pt

امتیاز (1pt = 1/72 از 1in)

کامپیوتر

عکس (1 عدد = 12 نقطه)

طول های نسبی

واحدهای طول نسبی طولی را نسبت به ویژگی طولی دیگر مشخص می کنند. واحدهای طول نسبی بین رسانه های مختلف رندر مقیاس بهتری دارند.

واحد

نسبت به

em*

نسبت به اندازه فونت عنصر (2em به معنای 2 برابر اندازه فونت فعلی است)

سابق

نسبت به ارتفاع x فونت فعلی (به ندرت استفاده می شود)

فصل

نسبت به عرض “0” (صفر)

رم*

نسبت به اندازه فونت عنصر ریشه

vw

نسبت به 1٪ از عرض درگاه دید *

vh

نسبت به 1% ارتفاع درگاه دید*

vmin

نسبت به 1% ابعاد کوچکتر درگاه دید*

vmax

نسبت به 1% ابعاد بزرگتر درگاه دید

نسبت به عنصر والد

1. پیکسل (پیکسل)

پیکسل احتمالاً پر استفاده ترین واحد در CSS است و در تنظیم اندازه فونت متن در صفحات وب بسیار محبوب است. یک پیکسل (1 پیکسل) به عنوان 1/96 اینچ در رسانه چاپی تعریف می شود.

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

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

اینجاست که نسبت پیکسل دستگاه وارد می شود. اساساً این فقط راهی برای محاسبه مقدار فضایی است که یک پیکسل CSS (1px) روی صفحه نمایش دستگاه اشغال می کند که باعث می شود در مقایسه با دستگاه دیگر، اندازه آن یکسان باشد.

در زیر یک مثال آورده شده است: –

<div class="container">
     <div>
       <h1>This is a paragraph</h1>
       <p>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
         omnis at! Officiis praesentium officia, nemo veniam consequatur
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem
         vel ullam aut, quod corporis ratione atque ducimus dolorum.
       </p>
     </div>
   </div>

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.containerdiv {
  max-width: 500px;
  padding: 5px 20px;
  border: 1px grey solid;
  border-radius: 10px;
}
p {
  font-size: 16px;
}

خروجی

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

توجه داشته باشید که چگونه متن در هر دو جعبه به یک اندازه است، این اساساً چگونه پیکسل کار می کند. این کمک می کند تا محتوای وب (نه فقط متن) در دستگاه ها به یک اندازه به نظر برسد.

2. Em (M)

واحد em نام خود را از حرف بزرگ “M” (em) گرفته است زیرا بیشتر واحدهای CSS از تایپوگرافی می آیند. از اندازه فونت فعلی عنصر والد به عنوان پایه خود استفاده می کند. می توان از آن برای بزرگ کردن یا کوچک کردن اندازه قلم یک عنصر بر اساس اندازه فونت به ارث رسیده از والد استفاده کرد.

فرض کنید یک div والد دارید که اندازه فونت آن 16 پیکسل است. اگر یک عنصر پاراگراف را در آن div ایجاد کنید و اندازه قلم 1em به آن بدهید، اندازه قلم پاراگراف 16 پیکسل خواهد بود.

با این حال، اگر پاراگراف دیگری را با اندازه فونت 2em بدهید که به 32 پیکسل تبدیل می شود. به مثال زیر توجه کنید:

   <div class="div-one">
      <p class="one-em">1 em based on 10px</p>
      <p class="two-em">2 em based on 10px</p>
  </div>
    <div class="div-two">
     <p class="one-em">1 em based on 10px</p>
     <p class="two-em">2 em based on 10px</p>
    </div>
   </div>

.div-one {
  font-size: 15px;
}
.div-two {
  font-size: 20px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
}

خروجی

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

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

3. Rem (Root Em)

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

اندازه فونت پیش‌فرض یک مرورگر وب معمولاً 16 پیکسل است، بنابراین 1 رم 16 پیکسل و 2 رم 32 پیکسل خواهد بود. با این حال، در موردی که اندازه فونت ریشه به عنوان مثال به 10 پیکسل تغییر می کند. 1rem 10px و 2rem 20px خواهد بود.

در اینجا یک مثال برای روشن تر شدن موضوع آورده شده است:

   <div class="div-one">
     <!-- EM -->
     <p class="one-em">1 em based on container (40px)</p>
     <p class="two-em">2 em based on container (40px)</p>
     <!-- REM -->
     <p class="one-rem">1 rem based on root (16px)</p>
     <p class="two-rem">2 rem based on root (16px)</p>
   </div>

.div-one {
  font-size: 40px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
}
.one-rem {
  font-size: 1rem;
}
.two-rem {
  font-size: 2rem;
}

خروجی

همانطور که می بینید، پاراگراف های تعریف شده با واحدهای REM کاملاً با اندازه فونت اعلام شده در ظرف ما مختل نمی شوند و به شدت نسبت به اندازه فونت ریشه تعریف شده در انتخابگر عنصر HTML ارائه می شوند.

Px در مقابل Em در مقابل Rem: کدام واحد بهترین است؟

Em به دلیل امکان داشتن سلسله مراتب پیچیده از عناصر تو در تو توصیه نمی شود. REM معمولاً به طور مناسب با اندازه فونت پیش‌فرض/پایه جدید مشخص شده در تنظیمات مرورگر در مقابل PX مقیاس‌بندی می‌شود. این توضیح می دهد که چرا باید هنگام کار با محتوای متنی در صفحات وب خود از REM استفاده کنید. REM برنده مسابقه است. طراحی بهتر و مقیاس بندی محتوای خود با REM به سایت شما جذابیت می بخشد زیرا برای سازندگان وب سایت ایده آل است. اندازه گیری روی نقطه محتوای شما ظاهر و احساس وب سایت شما را دیکته می کند، با این حال، شما باید خلاق باشید.

منبع مقاله