CSS واحدهای مختلفی را برای مشخص کردن طول propertyهایی مانند margin، padding، line-height یا font-size دارد. دلیل تعداد زیاد این واحدها، این است که هر کدام از آن‌ها برای اهداف مختلفی طراحی شده‌اند. برای مثال اگر بخواهید که propertyهای طول و عرض نوشته‌ها به طول و عرض نمایشگر وابسته باشند، واحدهای vh، vw، vmin و vmax به کار شما می‌آیند.

بطور کلی دو نوع واحد در CSS داریم: مطلق (absolute) و نسبی (relative)

تفاوت این دو نوع واحد این است که مقادیر واحدهای مطلق به element خاصی وابسته نیست، در صورتی که واحدهای نسبی وابسته‌اند.

در این مقاله شما با واحدهای مختلف و چگونگی تاثیر آن‌ها در font-size صفحه آشنا می‌شوید.

(Pixel (px

پیکسل‌ها واحدهای ثابتی هستند و به طور کلی پیکسل به تک نقطه‌هایی در صفحه کاربر اشاره دارد. با این حال در دستگاه‌های امروزه، تراکم‌های پیکسلیِ مختلفی دارند. این یعنی اینکه در دستگاهی که اندازه آن ۴ برابر بیشتر از یک دستگاهی باشد،  اندازه این نقطه ۱/۴ آن دستگاه می‌شود. برای حل این مشکل از reference pixel استفاده می‌کنیم.

تنظیم کردن font-size برای متون مختلف با پیکسل نه تنها نگه‌داری آن‌ها  را سخت می‌کند، بلکه کاربرپسند (user friendly) هم نیست. اگر که سایت بزرگی داشته باشید و بخواهید font-sizeها را از نو طراحی کنید، این کار تبدیل به یک کابوس خواهد شد. همچنین شما باید font-size را برای elementهای صفحه در اندازه‌های مختلف دستگاه‌ها تطبیق دهید. علاوه بر این‌ها چون پیکسل واحدی ثابت است، کاربر نمی‌تواند با تغییر تنظیمات اندازه فونت‌ها در مرورگر، اندازه نوشته‌ها را تغییر دهد.

به مثال زیر که اندازه نوشته‌های elementهای مختلف را تغییر داده را توجه کنید:

[codepen_embed height=”500″ theme_id=”0″ slug_hash=”eRMNvo” default_tab=”html,result” user=”navidagz”]See the Pen CSS Units 1 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

با دقت کردن به کدها می‌توان فهمید که font-size هر عنصر برابر مقدار پیکسلی است که به آن اختصاص داده شده و به چیزی وابسته نیست. شما می‌توانید امتحان کنید و اندازه نوشته‌ها را در تنظیمات مرورگرتان تغییر دهید و می‌بینید که اندازه این گونه نوشته‌ها (نوشته‌هایی که با پیکسل سایزبندی شدند) تغییری نخواهد کرد.
به طور خلاصه عدم انعطاف پذیری دلیل خوبی است که از پیکسل برای تنظیم کردن font-size استفاده نکنیم.

(Em (em

استفاده از em مشکلات override کردن تنظیمات کاربر را که در پیکسل داشتیم، از بین می‌برد. مقدارِ em، به مقدار پیش فرضِ font-size تنظیمات مرورگر وابسته است. اگر کاربر به صورت دستی آن را تغییر نداشته باشد، مقدار پیش فرض اندازه نوشته‌ها در مرورگرها ۱۶px است.

مقدار این واحد از font-size یک element خاص ارث می‌برد یا اصطلاحا inherited است، یعنی اگر یک element از font-size با مقدار ۲۵px به ارث ببرد و مقدار آن ۲em باشد، اندازه آن ۵۰px می‌شود.

برای درک بهتر em به مثال زیر توجه کنید:

[codepen_embed height=”538″ theme_id=”0″ slug_hash=”MoVwBd” default_tab=”html,result” user=”navidagz”]See the Pen CSS Unit 2 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

در مثال اول، اگر به inspect element مرورگر خود بروید می‌توانید ببینید که اندازه نوشته‌ها ۱۹.۲px می‌باشد که اگر ۱۶px را در ۱.۲ ضرب کنید همین مقدار می‌شود.

در مثال دوم که یک div در div دیگر داریم، در div اول اندازه نوشته‌ها آن ۱۹.۲px می‌باشد. پس اندازه نوشته‌های آن باید وابسه به div اولی باشد، بنابراین ۲۳.۰۴px می‌شود که ضرب ۱۹.۲px در ۱.۲ است.

(برای دیدنِ کامل عکس روی آن کلیک کنید)

(Rem (rem

تنها مشکل em این است که شاید شما نخواهید همیشه اندازه نوشته‌های فرزند از پدر به ارث برده شود. این مشکل را با rem حل می‌کنیم. مقدار rem همیشه وابسته به اندازه نوشته‌های element ریشه است.

به مثال زیر توجه کنید:

[codepen_embed height=”538″ theme_id=”0″ slug_hash=”gRepNz” default_tab=”html,result” user=”navidagz”]See the Pen CSS Units 3 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

در اینجا (که html آن مانند مثال قبل است) به جای em از rem استفاده کردیم، که اندازه نوشته‌های همه‌ی divها ۱.۲ برار اندازه نوشته مرورگر می‌شود.

درصد (%)

علامت درصد مانند واحد em عمل می‌کند. بطور کلی از درصد برای تنظیم کردن font-size برای element ریشه در نقاط استفاده می‌کنیم که در محاسبات طراحی responsive کمک بسزایی به ما می‌کند.

به مثال زیر توجه کنید:

[codepen_embed height=”538″ theme_id=”0″ slug_hash=”wemKaR” default_tab=”html,result” user=”navidagz”]See the Pen CSS Units 4 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

در این مثال اندازه html (کل صفحه) را %۶۲.۵ اندازه پیش فرض مرورگر قرار داده شده، که ۱۰px می‌شود. در divها اندازه نوشته‌ها را ۲rem گذاشتیم که دو برابر اندازه نوشته‌های html است که ۲۰px می‌شود.

واحدهای مشاهده (Viewport Units)

واحدهای مشاهده به شما این اجازه را می‌دهد که بر اساس ابعاد صفحه‌ای که آن را مشاهده می‌کنید، اندازه نوشته‌هایتان را تغییر دهید.

۴ واحد vw، vh، vmin و vmax برای این کار می‌توان استفاده کرد.

vh : وابسته کردن به مقدار ارتفاع viewport (مقدار ۱vh برابر %۱ مقدار ارتفاع viewport است.)

vw : وابسته کردن به مقدار عرض viewport (مقدار ۱vw برابر %۱ مقدار عرض viewport است.)

vmin : وابسته کردن به مقدار مینیموم ابعاد viewport یعنی اگر ارتفاع کوچکتر بود از ارتفاع استفاده می‌کند، در غیر این صورت از عرض (مقدار ۱vmin برابر %۱ مقدار مینیموم ابعاد viewport است.)

vmax : وابسته کردن به مقدار ماکزیمم ابعاد viewport یعنی اگر ارتفاع بزرگتر بود از ارتفاع استفاده می‌کند، در غیر این صورت از عرض (مقدار ۱vmax برابر %۱ مقدار ماکزیمم ابعاد viewport است.)

به مثال زیر توجه کنید:

[codepen_embed height=”425″ theme_id=”0″ slug_hash=”gReaLB” default_tab=”html,result” user=”navidagz”]See the Pen CSS Units 5 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

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

دیگر واحدهای مطلق (Absolute)

CSS واحدهای دیگری دارد که کاربرد چندانی برای نمایش در صفحات ندارد و بیشتر در پرینت به کار می‌آید. برای مثال pt و pc برای اندازه نوشته‌ها مقدار ۰.۰۱۳۸ و ۰.۱۶۶۶ اینچ را دارد. همچنین واحدهای اینچ (in)، سانتی‌متر (cm) و میلی‌متر (mm) را داریم.

استفاده از کلید واژه‌ها در اندازه نوشته‌ها

گزینه بعدی برای تنظیم کردن اندازه نوشته‌ها استفاده از کلید واژه‌ها (keywords) می‌باشد.

کلید واژه‌های مطلق عبارت‌اند از:

xx-small, x-small, small, medium, large, x-large, xx-large

کلید واژه‌های نسبی عبارت‌اند از: smaller و larger

اگر که اندازه نوشته large باشد، با smaller به medium تغییر می‌کند و همین طور برعکس.

[codepen_embed height=”538″ theme_id=”0″ slug_hash=”yXKYKO” default_tab=”html,result” user=”navidagz”]See the Pen CSS Units 5 by Navid Agz (@navidagz) on CodePen.[/codepen_embed]

در این مثال اندازه عبارتی که در به صورت مستفیم در div قرار گرفته است، اندازه larger گرفته که با در نظر گرفتن مقدار پیش فرض آن که medium است، باید یک درجه بزرگتر شود. پس large می‌شود. در قسمت دوم آن div درونی هم اندازه larger گرفته که سایز آن را به x-large تبدیل می‌کند.

نکته قابل توجه دیگر این است که این تغییر اندازه‌ها تاثیری در پاراگراف‌ها ندارد، زیرا بعدا override شده‌اند.

پشتیبانی مرورگرها

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

واحدهای مطلق مانند px، pt، pc، in، cm و mm در تمامی مرورگرها پشتیبانی می‌شوند. همچنین em تقریبا در تمامی مرورگر ها پشتیبانی می‌شود.

با این حال واحد rem از مرورگر Internet Explorer 8 به پایین پشتیبانی نمی‌شود. حتی در IE9 و IE10 استفاده از آن با مشکلاتی روبرو است.

از تمامی واحدهایی که در این مقاله معرفی شدند، واحدهای viewport کمترین پشتیبانی را دارند. قابل ذکر است که IE10 و Edge هنوز به طور کامل از vmax پشتیبانی نمی‌کند.

نتیجه

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