واحدهای اندازه گیری در CSS؛ px، درصد، em و rem | درس 25 + پروژه درس

درس 25 از دوره 60 جلسه ای آموزش HTML و CSS ارومیا دیزاین

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

پیش نیاز: اتصال CSS به HTML در درس 21 و رنگ و پس زمینه در درس 24. حدود 35 دقیقه برای مطالعه و 20 دقیقه برای اجرای تمرین در نظر بگیرید. هدف این جلسه طراحی کامل واکنش گرا نیست؛ ابتدا باید بفهمیم هر مقدار نسبت به چه چیزی اندازه می گیرد.

دانلود پروژه درس 25؛ فایل ZIP همراه پاسخ تمرین

مقدار، واحد و مبنای اندازه گیری

در اعلان font-size: 20px، عدد 20 مقدار و px واحد طول است. در width: 50%، درصد به یک مقدار مرجع وابسته است. بدون شناخت مرجع، عدد به تنهایی نتیجه را توضیح نمی دهد. همچنین عدد و واحد را به هم بچسبانید؛ نوشتن 20 px معتبر نیست.

.card {
  font-size: 20px;
  width: 50%;
}

در کد بالا اندازه متن برحسب پیکسل CSS و عرض برحسب درصد تعیین شده است. برای طول صفر معمولاً می توانید 0 را بدون واحد بنویسید. اما مقدار غیرصفر طول، مثل padding: 20، در این کاربرد معتبر نیست؛ padding: 20px یا padding: 1rem بنویسید. بعضی ویژگی ها مانند line-height عدد بدون واحد می پذیرند و قانون متفاوتی دارند.

px چیست؟ یک پیکسل CSS، نه الزاماً یک نقطه نمایشگر

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

برای کادر باریک، px انتخاب قابل فهمی است. برای عرض یک نمونه آزمایشی نیز به ما امکان مقایسه می دهد. این واحد ممنوع نیست، اما عرض ثابت بزرگ ممکن است در صفحه کوچک جا نشود. زوم مرورگر هم محتوای دارای px را بزرگ می کند؛ ثابت بودن مقدار CSS به معنی مقاومت در برابر زوم نیست.

.fixed {
  width: 200px;
  border: 1px solid #64748b;
}

عرض این عنصر در فضای کافی 200px است. اگر والد باریک تر شود، همین مقدار می تواند مشکل بسازد. در پروژه برای جلوگیری از بیرون زدن نمونه، max-width: 100% هم اضافه می کنیم؛ در این حالت عرض واقعی دیگر همیشه 200px نخواهد بود.

درصد در CSS نسبت به چه چیزی محاسبه می شود؟

پاسخ به ویژگی بستگی دارد. در جریان عادی پروژه ما، width: 50% از عرض فضای محتوای ظرف نگهدارنده محاسبه می شود. اگر آن فضا 400px باشد، عرض نمونه 200px است؛ اگر 600px باشد، عرض نمونه 300px می شود. «درصد همیشه از اندازه صفحه است» درست نیست.

.parent {
  width: 400px;
}
.child {
  width: 50%;
}

در این نمونه ساده، child نصف عرض parent است. برای font-size، درصد نسبت به اندازه فونت والد محاسبه می شود؛ مثلاً 125% از فونت والد 16px برابر 20px است. height: 100% نیز بدون داشتن ارتفاع مرجع قابل تعیین، لزوماً عنصر را هم ارتفاع صفحه نمی کند. فعلاً برای بخش های متنی ارتفاع ثابت تعیین نکنید تا محتوا بتواند رشد کند.

em؛ اندازه نسبی با دو کاربرد مهم

وقتی em را برای font-size می نویسید، اندازه فونت والد مبناست. وقتی برای طول هایی مانند padding استفاده می کنید، اندازه فونت محاسبه شده خود عنصر مبنا می شود. این تفاوت را با مثال ببینید:

.parent {
  font-size: 20px;
}
.button {
  font-size: 1.2em;
  padding: 0.5em 1em;
}

با فونت والد 20px، فونت دکمه 24px می شود. سپس padding عمودی 0.5em از فونت خود دکمه محاسبه می شود و 12px خواهد بود؛ padding افقی 1em برابر 24px است. این رفتار برای دکمه ای مناسب است که فاصله داخلی آن باید همراه نوشته اش رشد کند.

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

اگر روی تمام liها font-size: 1.2em بگذارید، لیست داخلی از اندازه فونت والد بزرگ شده استفاده می کند و دوباره در 1.2 ضرب می شود. با مبنای اولیه 16px، سطح اول 19.2px و سطح دوم 23.04px می شود. این جمع شدن اثر ممکن است هدف شما نباشد. ساختار تو در تو را در درس 10؛ لیست های HTML مرور کنید.

rem؛ یک مرجع مشترک در ریشه سند

واحد rem از اندازه فونت عنصر ریشه، معمولاً html، محاسبه می شود. اگر فونت ریشه 16px باشد، 1rem برابر 16px و 1.5rem برابر 24px است. این تبدیل یک فرض برای مثال است؛ 1rem همیشه 16px نیست.

html {
  font-size: 100%;
}
.note {
  font-size: 1.5rem;
}

در این نمونه، متن note حتی داخل بخش دارای فونت بزرگ تر، از فونت ریشه استفاده می کند. font-size: 100% روی html نقطه شروع مناسبی است تا اندازه پایه از تنظیم مرورگر پیروی کند؛ برای راحت شدن محاسبه، اندازه ریشه را بی دلیل کوچک نکنید. تنظیم قطعی 16px در مثال های محاسباتی با احترام به تنظیم کاربر در پروژه واقعی یک انتخاب یکسان نیست.

برای مرور نقش والد و ارث بری، آبشار و ارث بری در درس 23 را ببینید. rem وابستگی به فونت والد را کم می کند، اما استفاده از آن به تنهایی دسترس پذیری یا طراحی واکنش گرا را تضمین نمی کند.

جدول انتخاب واحد در این جلسه

قرار نیست تمام مقدارها را با یک واحد بنویسید. در پروژه، px برای کادر، درصد برای عرض، rem برای فاصله های صفحه و em برای دکمه کنار هم استفاده شده اند. واحدهای viewport مانند vw و vh هم وجود دارند، اما برای این تمرین لازم نیستند.

پروژه درس 25؛ آزمایشگاه اندازه ها

دانلود فایل های پروژه درس 25 همراه پاسخ تمرین

ZIP شامل index.html، style.css، solution.css و راهنمای فارسی README.txt است. آن را استخراج کنید و index.html را در مرورگر باز کنید. پروژه بدون اینترنت و نصب ابزار اجرا می شود. برای ساخت دستی فایل ها، پوشه بندی پروژه در درس 3 و اتصال CSS به HTML در درس 21 را مرور کنید.

صفحه سه بخش دارد: مقایسه عرض، مقایسه فونت و تمرین مستقل. انتخاب کلاس های مشخص را مطابق انتخابگرهای CSS در درس 22 انجام می دهیم. ساختار header و main و section نیز از ساختار معنایی درس 15 پیروی می کند.

فایل index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>آزمایشگاه واحدهای CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header>
      <p>درس 25 ارومیا دیزاین</p>
      <h1>آزمایشگاه اندازه ها</h1>
      <p>عرض پنجره را تغییر دهید و نتیجه را مقایسه کنید.</p>
    </header>
    <section class="panel" aria-labelledby="width-title">
      <h2 id="width-title">1. عرض ثابت و نسبی</h2>
      <div class="track">
        <div class="sample fixed">عرض 200px</div>
        <div class="sample percent">عرض 50%</div>
      </div>
      <p>نوار درصدی از عرض فضای داخل track پیروی می کند.</p>
    </section>
    <section class="panel" aria-labelledby="font-title">
      <h2 id="font-title">2. متن و فاصله نسبی</h2>
      <div class="component">
        <p class="em-text">این متن با em اندازه می گیرد.</p>
        <p class="rem-text">این متن با rem اندازه می گیرد.</p>
        <a class="button" href="#practice">رفتن به تمرین</a>
      </div>
    </section>
    <section id="practice" class="panel practice">
      <h2>تمرین شما</h2>
      <p>اندازه این متن را 1.25rem کنید و فاصله داخلی این بخش را به 2rem برسانید.</p>
    </section>
  </main>
</body>
</html>

فایل style.css

html {
  font-size: 100%;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #1e293b;
  background-color: #f1f5f9;
}
.page {
  width: 90%;
  max-width: 56rem;
  margin: 2rem auto;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
.panel {
  background-color: #ffffff;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}
.track {
  border: 1px dashed #64748b;
  padding: 0.5rem;
}
.sample {
  background-color: #075985;
  color: #ffffff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}
.fixed {
  width: 200px;
  max-width: 100%;
}
.percent {
  width: 50%;
}
.component {
  font-size: 1.25rem;
}
.em-text {
  font-size: 1.2em;
}
.rem-text {
  font-size: 1.2rem;
}
.button {
  display: inline-block;
  font-size: 1em;
  padding: 0.5em 1em;
  background-color: #075985;
  color: #ffffff;
  border-radius: 0.4em;
}
.button:focus-visible {
  outline: 3px solid #9f1239;
  outline-offset: 3px;
}

قانون box-sizing: border-box باعث می شود عرض تعیین شده شامل padding و border باشد. بدون آن، این فاصله ها به عرض محتوای عنصر اضافه می شوند. جزئیات مدل جعبه را در درس بعد بررسی می کنیم. max-width روی صفحه از بیش از حد عریض شدن محتوا جلوگیری می کند و روی نمونه ثابت مانع بیرون زدن آن از فضای باریک می شود.

سه آزمایش برای فهم نتیجه

1. تغییر عرض: پنجره را باریک و پهن کنید. نوار درصدی همراه فضای track تغییر می کند. نوار ثابت در فضای کافی 200px باقی می ماند؛ در فضای کم، max-width آن را محدود می کند.
2. تغییر فونت بخش: font-size بخش component را از 1.25rem به 1.5rem تغییر دهید. متن em و دکمه بزرگ می شوند، اما اندازه متن rem از این تغییر اثر نمی گیرد.
3. تغییر ریشه: موقتاً font-size عنصر html را از 100% به 125% تغییر دهید. مقدارهای rem و مقدارهای em وابسته به آنها بزرگ می شوند؛ سپس تنظیم را به 100% برگردانید.

با فرض فونت ریشه 16px، اندازه component در شروع 20px است، em-text برابر 24px و rem-text برابر 19.2px خواهد بود. بعد از آزمایش دوم، component به 24px و em-text به 28.8px می رسد؛ rem-text همچنان 19.2px است. این نتیجه را در بخش Computed ابزار بررسی مرورگر ببینید.

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

تمرین درس 25؛ فاصله و متن هماهنگ

بدون تغییر HTML، فقط اندازه پاراگراف بخش practice را 1.25rem کنید و padding همان بخش را به 2rem برسانید. عنوان آن بخش نباید از قانون اندازه پاراگراف تأثیر بگیرد. سپس اندازه پایه مرورگر را تغییر دهید و بررسی کنید نوشته ها بریده نمی شوند. درس دسترس پذیری برای بررسی دسترس پذیری کمک می کند.

.practice {
  padding: 2rem;
}
.practice p {
  font-size: 1.25rem;
}

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

• نوشتن فاصله بین عدد و واحد: 20 px معتبر نیست؛ 20px بنویسید.
• فرض همیشگی 1rem برابر 16px: ابتدا فونت ریشه را بررسی کنید.
• یکی دانستن em در تمام ویژگی ها: فونت والد و فونت خود عنصر را از هم جدا کنید.
• استفاده از عرض ثابت بزرگ: نتیجه را در صفحه باریک و با زوم آزمایش کنید.
• تعیین ارتفاع ثابت برای متن: با بزرگ شدن نوشته ممکن است محتوا بریده یا خارج شود.
• فرض درصد نسبت به صفحه: ویژگی و ظرف مرجع را مشخص کنید.

پرسش های رایج درباره واحدهای CSS

همه pxها را به rem تبدیل کنم؟

خیر. واحد را بر اساس رفتار مورد نیاز انتخاب کنید. کادر باریک px، فاصله سراسری rem و فاصله وابسته به متن دکمه em می توانند کنار هم مناسب باشند. تبدیل خودکار بدون شناخت مرجع می تواند نتیجه را عوض کند.

چرا width: 100% گاهی بیرون می زند؟

در مدل پیش فرض content-box، padding و border به عرض محتوا اضافه می شوند. مدل جعبه، margin و فضای والد را بررسی کنید. border-box در پروژه کمک می کند، اما همه علت های بیرون زدن محتوا را حل نمی کند.

line-height: 1.8 یعنی 1.8px؟

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

استفاده از درصد یعنی صفحه واکنش گرا شده است؟

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

مرور و درس بعدی

پیش از نوشتن هر اندازه، بپرسید «مرجع این مقدار چیست و باید همراه چه چیزی تغییر کند؟». اکنون می توانید نتیجه px، درصد، em و rem را پیش بینی کنید. در درس 26 سراغ مدل جعبه CSS و تفاوت margin، padding و border می رویم. همه جلسات در دسته آموزش HTML و CSS قرار دارند.

برای مطالعه تکمیلی: مرجع طول ها در MDN و مرجع اندازه فونت در MDN.