فهرست مطالب
وقتی اندازه‌گیری بخش‌های یک صفحه وب را شروع می‌کنید، شاید ساده‌ترین کار تعیین همه مقادیر با پیکسل باشد. نتیجه در نگاه نخست بی‌نقص به نظر می‌رسد، اما کافی است کاربر تنظیمات اندازه قلم پیش‌فرض مرورگر خود را برای خوانایی بهتر تغییر دهد یا سایت در نمایشگری با تراکم پیکسلی متفاوت باز شود تا چیدمان صفحه دچار شکستگی و ناخوانایی شود.
در استاندارد وب، مقادیر اندازه‌گیری به دو دسته کلی مطلق و نسبی تقسیم می‌شوند. درک دقیق شیوه محاسبه هر یک از این واحدها مانع از ساعت‌ها آزمون و خطا هنگام ساخت صفحات واکنش‌گرا می‌شود.
تفاوت بنیادین واحدهای مطلق و نسبی در استاندارد وب
واحد px یک اندازه مطلق در نظر گرفته می‌شود. طبق مشخصات CSS، یک پیکسل وب برابر با یک‌نودوششم اینچ بصری است. این واحد به تنظیمات سیستم یا فونت والد هیچ وابستگی ندارد. اگر اندازه متنی را ۱۶ پیکسل تعیین کنید، مرورگر همیشه آن را روی همان اندازه ثابت قفل می‌کند.
در نقطه مقابل، واحدهای نسبی مثل em و rem اندازه‌شان را از یک مقدار پایه محاسبه می‌کنند. این ویژگی به کاربرانی که به دلیل ضعف بینایی اندازه قلم مرورگر را افزایش می‌دهند اجازه می‌دهد کل صفحه را بدون به‌هم‌ریختگی به شکل هماهنگ بزرگ کنند.
واحد em اندازه خود را بر اساس اندازه قلم المان فعلی یا والد مستقیم آن به دست می‌آورد. اگر اندازه فونت والدی ۱۶ پیکسل باشد، مقدار 1.5em برای فرزند برابر با ۲۴ پیکسل خواهد بود.
واحد rem که مخفف root em است، تمام محاسبات خود را تنها بر اساس اندازه فونت المان ریشه یعنی تگ <html> انجام می‌دهد. در حالت استاندارد بیشتر مرورگرها، اندازه فونت ریشه ۱۶ پیکسل است، بنابراین 1rem معادل ۱۶ پیکسل و 2rem معادل ۳۲ پیکسل محاسبه می‌شود.
پیاده‌سازی عملی واحدهای اندازه‌گیری
برای درک نحوه محاسبه، نمونه زیر نحوه رفتار این سه واحد را در ساختار سند نشان می‌دهد:
css/* تنظیم اندازه پایه سند در صورت نیاز */
html {
font-size: 16px;
}
/* جعبه اصلی با حاشیه ثابت */
.card {
border: 1px solid #ccc; /* ضخامت کادر بهتر است ثابت باشد */
padding: 1.5rem; /* ۲۴ پیکسل بر اساس ریشه */
font-size: 1.25rem; /* ۲۰ پیکسل اندازه قلم این بخش */
}
/* دکمه داخل جعبه با واحد نسبی به فونت خودش */
.card-button {
font-size: 1rem; /* ۱۶ پیکسل بر اساس ریشه */
padding: 0.5em 1em; /* فاصله داخلی متناسب با فونت دکمه تغییر می‌کند */
border-radius: 4px;
}
در این الگو، حاشیه با px تعریف شده است چون مرزهای باریک نباید با اندازه متن متورم شوند. فاصله درونی جعبه با rem مشخص شده تا فاصله‌گذاری بخش‌های مختلف هماهنگ بماند. فاصله داخلی دکمه با em تعیین شده تا اگر در بخشی از سایت اندازه فونت دکمه را بزرگ‌تر کردید، پدینگ دکمه به شکل خودکار و متناسب رشد کند.
اشتباه رایج در استفاده تودرتو از em
بزرگ‌ترین دامی که توسعه‌دهندگان تازه‌کار در آن گرفتار می‌شوند، اثر زنجیره‌ای یا ارث‌بری تصاعدی em در فونت است. وقتی از em برای ویژگی font-size در ساختارهای تودرتو استفاده می‌کنید، هر المان فرزند مقدار قبلی را ضربدر اندازه جدید می‌کند.
html<ul class="nested-list">
<li>سطح اول (۱۸ پیکسل)
<ul>
<li>سطح دوم (۲۱.۶ پیکسل)
<ul>
<li>سطح سوم (۲۵.۹ پیکسل)</li>
</ul>
</li>
</ul>
</li>
</ul>
اگر در استایل بنویسید li { font-size: 1.2em; }، متن هر سطح نسبت به والد مستقیم خود ۲۰ درصد بزرگ‌تر می‌شود و در چند سطح عمیق‌تر با متن‌های بسیار بزرگ و زننده روبه‌رو می‌شوید. برای اندازه متن، استفاده از rem تقریباً همیشه انتخابی امن‌تر و پیش‌بینی‌پذیرتر است.
قانون انتخاب سریع برای توسعه روزمره
برای تمیز ماندن کد و نگهداری آسان‌تر، این رویکرد عملی را مبنا قرار دهید:
۱. برای font-size در تمام بخش‌ها از rem استفاده کنید تا اندازه متن در کنترل کامل ریشه سند باشد.
۲. برای حاشیه‌های نازک، سایه‌ها و خطوط مرزی از px بهره ببرید تا ضخامت خطوط در صفحه‌های با تراکم بالا تار یا تغییر شکل پیدا نکند.
۳. برای فاصله‌های داخلی مثل پدینگ آیکون‌ها و دکمه‌ها از em استفاده کنید تا تناسب فاصله با اندازه نماد یا متن مجاور همیشه حفظ شود.
۴. برای گریدها و فواصل چیدمان اصلی صفحه از rem یا درصدهای شناور استفاده کنید.
قدم بعدی برای یادگیری
تسلط بر سیستم اندازه‌گیری در CSS گام نخست برای ساخت رابط‌های کاربری تمیز و استاندارد است. برای تسلط بیشتر بر مباحث پیشرفته‌تر صفحه‌آرایی، فلکس‌باکس و طراحی واکنش‌گرا، می‌توانید دوره وب از صفر تا حرفه‌ای: HTML و CSS را در دیناکد دنبال کنید و روی پروژه‌های واقعی تمرین داشته باشید.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربه‌تان را بنویسید تا نویسنده‌ی مطلب پاسخ بدهد.