واحد های اندازه گیری در css
شنبه, ۲۸ اسفند ۱۳۹۵، ۰۲:۵۹ ب.ظ
هنگامی که برای نوشتن قانون نیاز به واحد اندازه گیری برای مقدار یک ویژگی داشته باشید، برای این کار روش های مختلفی وجود دارد:
واحد های اندازه گیری مطلق
واحد های اندازه گیری مطلق مربوط به طول عبارتند از سانتی متر (cm)، میلیمتر (mm)، و اینچ (in). اگرچه به نظر می رسد که بدون در نظر گرفتن رزولوشن (resolution) صفحه نمایش همه این واحدهای اندازه گیری طول با یکدیگر برابر هستند، اما این مساله همیشه قابل اعتماد نیست! چون معمولا مرورگرهای وب اندازه دقیق نمایشگر رسانه مورد استفاده را نمی دانند.
واحد های اندازه گیری بر اساس مقادیر تایپی (Typographical)
اگر با فرایند صفحه بندی و تایپ آشنایی داشته باشید می دانید که دو واحد اندازه گیری برای تایپ فونت ها وجود دارد: points (pt) و picas (pc). بر اساس تعریف، هر اینچ شامل 72 پوینت است و هر 12 پوینت برابر با یک pica است. مثل واحدهای اندازه گیری مطلق، این نوع واحد های اندازه گیری هم برای رسانه های چاپی بسیار مناسب هستند و بهتر است در صفحات نمایش از آنها استفاده نکنیم.
واحد های اندازه گیری نسبی مربوط به طول، شامل پیکسل (px) و درصد (%) هستند. منظور از درصد، نسبت اندازه به اندازه ویژگی والد همان عنصر(parent element) است. اندازه یک پیکسل به اندازه فیزیکی پیکسل بر روی نمایشگر کاربر بستگی دارد.
از طرف دیگر، می توان از واحد درصد برای مشخص کردن اندازه متن استفاده کرد به خاطر اینکه معمولا می خواهیم که اندازه متن قابل تنظیم باشد، چون این مساله مخصوصا در ابزارهایی که دارای صفحه نمایش کوچک هستند مساله مهمی است.
اما در زمانی که متن قسمتی از طراحی شما به حساب می آید و باید تناسب دقیق با سایر محتوای صفحه داشته باشد، می توان از واحد اندازه گیری پیکسل استفاده کرد (تا کنترل کاملی بر روی اندازه فونت ها داشته باشیم). مرورگرهای وب مدرن معمولا به ما این امکان را می دهند که بتوانیم در تمام قسمت صفحه زوم انجام دهیم، در این حالت می توانیم از واحد پیکسل استفاده کنیم که کنترل بیشتری بر روی محتوا داشته باشیم. توجه داشته باشید که در صفحه های نمایش که دارای رزولوشن خیلی بالا هستند، هر پیکسل در مورد قوانین css به عنوان پیکسل های چندگانه (multiple pixels) صفحه نمایش ارائه می شوند. به عنوان مثال در صفحه های نمایش نوع Retina در سیستم Appleتمام اندازه های پیکسل به صورت دو برابر اندازه واقعی محاسبه می شوند.
واحد های اندازه گیری مربوط به فونت ها
دو واحد اندازه گیری دیگر نیز وجود دارند که به صورت نسبی هستند: em-height (em) و ex-height (ex).
em-height مثل font-size عمل می کند.ex-hight تقریبا به اندازه نصف font-size است.
درcss3 دو واحد اندازه گیری دیگر نیز ارائه می شود: rem و ch. واحد اندازه گیری root em-heightیا همان (rem) اندازه فونت را نسبت به اندازه فونت عنصر ریشه خود در ساختار اچ تی ام ال، مشخص می کند. از این واحد می توان به جای em استفاده کرد؛ با این کار می توان از تغییر اندازه فونت بر اساس تغییراتی که در اندازه فونت والد ایجاد می شود جلوگیری کرد.
واحدهای اندازه گیری viewport
عرض دید (vw) و ارتفاع دید (vh) اجازه می دهد که عناصری که توسط آن مشخص شده اند بر اساس ناحیه دید (viewpoint) اندازه دهی شوند، منظور از viewpoint قسمت قابل دیدن سند در پنجره مرورگر است، یعنی همان قسمتی از صفحه وب، که کاربر آن را در صفحه نمایش خود مشاهده می کند. هر واحد یک درصد از نمای فعلی را نشان می دهد.
واحد های اندازه گیری مطلق
واحد های اندازه گیری مطلق مربوط به طول عبارتند از سانتی متر (cm)، میلیمتر (mm)، و اینچ (in). اگرچه به نظر می رسد که بدون در نظر گرفتن رزولوشن (resolution) صفحه نمایش همه این واحدهای اندازه گیری طول با یکدیگر برابر هستند، اما این مساله همیشه قابل اعتماد نیست! چون معمولا مرورگرهای وب اندازه دقیق نمایشگر رسانه مورد استفاده را نمی دانند.
.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }
در اصل از این نوع واحد اندازه گیری باید زمانی استفاده کنیم که دقیقا اندازه رسانه ای که قرار است محتوا بر روی آن نمایش داده شود مشخص باشد؛ مثلا فرض کنید که یک محتوا را می خواهیم دقیقا برای چاپ بر روی یک کاغذ با اندازه خاص آماده کنیم. این روش برای نمایش اطلاعات بر روی صفحه نمایش (screen) ابزار مختلف توصیه نمی شود، چون اندازه صفحات نمایش مختلف با یکدیگر بسیار تفاوت دارند. واحد های اندازه گیری بر اساس مقادیر تایپی (Typographical)
اگر با فرایند صفحه بندی و تایپ آشنایی داشته باشید می دانید که دو واحد اندازه گیری برای تایپ فونت ها وجود دارد: points (pt) و picas (pc). بر اساس تعریف، هر اینچ شامل 72 پوینت است و هر 12 پوینت برابر با یک pica است. مثل واحدهای اندازه گیری مطلق، این نوع واحد های اندازه گیری هم برای رسانه های چاپی بسیار مناسب هستند و بهتر است در صفحات نمایش از آنها استفاده نکنیم.
.one-point { font-size: 1pt; }
.one-pica { font-size: 1pc; }
واحدهای اندازه گیری نسبی (Relative)واحد های اندازه گیری نسبی مربوط به طول، شامل پیکسل (px) و درصد (%) هستند. منظور از درصد، نسبت اندازه به اندازه ویژگی والد همان عنصر(parent element) است. اندازه یک پیکسل به اندازه فیزیکی پیکسل بر روی نمایشگر کاربر بستگی دارد.
.one-pixel { font-size: 1px; }
.one-pica { font-size: 1%; }
در نوشتن کدهای css برای نمایش محتوا بر روی صفحه نمایش دستگاه کاربر، دو واحد پیکسل و درصد از پرکاربردترین واحدهای اندازه گیری هستند. پیکسل ها اندازه های مشخص و ثابت هستند و بنابراین به شما این اجازه را می دهند که کنترل کامل و دقیق بر روی اندازه محتوای قابل نمایش بر روی صفحه نمایش داشته باشید. از طرف دیگر، می توان از واحد درصد برای مشخص کردن اندازه متن استفاده کرد به خاطر اینکه معمولا می خواهیم که اندازه متن قابل تنظیم باشد، چون این مساله مخصوصا در ابزارهایی که دارای صفحه نمایش کوچک هستند مساله مهمی است.
اما در زمانی که متن قسمتی از طراحی شما به حساب می آید و باید تناسب دقیق با سایر محتوای صفحه داشته باشد، می توان از واحد اندازه گیری پیکسل استفاده کرد (تا کنترل کاملی بر روی اندازه فونت ها داشته باشیم). مرورگرهای وب مدرن معمولا به ما این امکان را می دهند که بتوانیم در تمام قسمت صفحه زوم انجام دهیم، در این حالت می توانیم از واحد پیکسل استفاده کنیم که کنترل بیشتری بر روی محتوا داشته باشیم. توجه داشته باشید که در صفحه های نمایش که دارای رزولوشن خیلی بالا هستند، هر پیکسل در مورد قوانین css به عنوان پیکسل های چندگانه (multiple pixels) صفحه نمایش ارائه می شوند. به عنوان مثال در صفحه های نمایش نوع Retina در سیستم Appleتمام اندازه های پیکسل به صورت دو برابر اندازه واقعی محاسبه می شوند.
واحد های اندازه گیری مربوط به فونت ها
دو واحد اندازه گیری دیگر نیز وجود دارند که به صورت نسبی هستند: em-height (em) و ex-height (ex).
em-height مثل font-size عمل می کند.ex-hight تقریبا به اندازه نصف font-size است.
.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }
مثل درصد، واحد em-heightیک واحد نسبی خوب است که معمولا برای تعیین کردن اندازه فونت ها در صفحه وب استفاده می شود. با هر دو این واحدهای اندازه گیری می توان به کاربر این اجازه را داد که خودش اندازه فونت ها را انتخاب کند و این نوع واحد ها برای خواندن متن در دستگاه های با صفحات نمایش کوچک تر مناسب تر هستند. درcss3 دو واحد اندازه گیری دیگر نیز ارائه می شود: rem و ch. واحد اندازه گیری root em-heightیا همان (rem) اندازه فونت را نسبت به اندازه فونت عنصر ریشه خود در ساختار اچ تی ام ال، مشخص می کند. از این واحد می توان به جای em استفاده کرد؛ با این کار می توان از تغییر اندازه فونت بر اساس تغییراتی که در اندازه فونت والد ایجاد می شود جلوگیری کرد.
.one-rem { font-size: 1rem; }
واحد اندازه گیری Character unit (ch) عرض کاراکتر صفر (0) را برای فونت اندازه گیری می کند. از این واحد اندازه گیری می توان برای تعریف عرض کادری (box) که متن در آن قرار می گیرد استفاده کرد چون این واحد اندازه گیری تقریبا متناسب با تعداد کاراکترهایی است که در داخل آن جعبه قرار گرفته اند.
/* عرض های مشابه */در هنگام استفاده از واحد های rem و ch دقت کنید که مروگرهای وب در نسخه های خاصی از این دو واحد اندازه گیری پشتیبانی می کنند. البته واحد rem در نسخه های بیشتری از مروگرهای وب پشتیبانی می شود.00000
واحدهای اندازه گیری viewport
عرض دید (vw) و ارتفاع دید (vh) اجازه می دهد که عناصری که توسط آن مشخص شده اند بر اساس ناحیه دید (viewpoint) اندازه دهی شوند، منظور از viewpoint قسمت قابل دیدن سند در پنجره مرورگر است، یعنی همان قسمتی از صفحه وب، که کاربر آن را در صفحه نمایش خود مشاهده می کند. هر واحد یک درصد از نمای فعلی را نشان می دهد.
width: 50vw; /* 50% of viewpoint width */ height: 25vh; /* 25% of viewpoint height */در واحد اندازه گیری viepoint دو واحد دیگر نیز وجود دارد، vmin و vmax که این دو واحد در واقع بیشترین و کمترین اندازه های viewpoint را برمی گردانند.
width: 1vmin; /* 1vh یا 1vw, هرکدام که کوچک تر باشند */ width: 1vmax; /* 1vh یا 1vw, هرکدام که بزرگ تر باشند */در هنگام استفاده از این واحد های اندازه گیری توجه داشته باشید که نسخه های خاصی از مرورگرها از این واحد ها پشتیبانی می کنند، پس باید از این واحدهای اندازه گیری با دقت بیشتری استفاده کنید.
