آموزش طراحی وب

واحدهای اندازه گیری در css

در این جلسه ی آموزشی ، در رابطه با واحد های اندازه گیری صحبت می کنیم .

CSS

فصل دوم : مرجع  CSS

جلسه اول  : واحدهای اندازه گیری در css

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی کوتاه آموزشی در رابطه با واحدهای اندازه گیری صحبت می کنیم .

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

در طراحی واحدهای مختلفی وجود داره اما واحدهایی که در وب بصورت استاندارد استفاده میشه px ,  em و % هست .

PX : پیکسل (pixel) واحد اندازه گیری معمول در طراحی وب هست که اکثر کدنویسان از این واحد اندازه گیری استفاده می کنند .

% : Percentage واحد درصدی هست که در طراحی رسپانسیو و واکنشگرا به شدت استفاده میشه .

em : واحدی هست که اندازه آن به اندازه ی فونت پدر تگ جاری بستگی داره . به عنوان مثال اگر اندازه ی فونت یک تگ برابر با ۱۰ پیکسل باشه و اندازه فونت تگی که درون این تگ قرار داره به اندازه ی ۲em تعیین شده باشه ، اندازه ی فونت تگ فرزند دو برابر تگ پدر میشه ، یعنی ۲۰ پیکسل .

rem : مشکلی که واحد em داره اینکه سایزش نسبت به عنصر والد تعیین میشه و ممکنه دچار مشکل بشید ، برای حل این مشکل میتونید در کنار em از rem هم استفاده کنید . واحد rem هم مثل em عمل میکنه با این تفاوت که سایز فونت نسبت به سایز تعیین شده برای عنصر root مشخص میشه (مثل html , body) .

نکته : علاوه بر فونت شما میتونید از این واحد ها برای width , height , padding , margin و سایر اندازه گیری ها در css استفاده کنید .

 واحدهای اندازه گیری در وب با واحدهای اندازه گیری در چاپ متفاوت هست ، به جدول زیر دقت کنید ، در این جدول واحدهای مناسب برای هر محیط توضیح داده شده :

پیشنهاد میشه پیشنهاد نمیشه !
استفاده برای نمایش در وب em, px, % pt, cm, mm, in
استفاده برای چاپ روی کاغذ em, cm, mm, in, pt, %

در جدول زیر میتونید واحدهای اندازه گیری رو ببینید :

واحد توضیحات
% درصد
in اینچ
cm سانتی متر
mm میلی متر
em یک em یعنی اندازه کنونی سایز (که از تگ پدر ارث برده). ۲em یعنی دو برابر اندازه به ارث برده شده از تگ پدر و …
pt point ، هر ۱pt برابر است با ۱/۷۲ اینچ
px پیکسل ، یک پیکسل یک نقطه روی صفحه نمایش مانیتور محسوب میشه

قواعد نوشتن واحدها

به کد زیر دقت کنید :

 در این کد ما برای فونت عنصر h1 سایز ۱۲ پیسکل رو در نظر گرفتیم . عدد و واحد اندازه گیری بدون فاصله در کنار یکدیگر قرار میگیرند .

خوب دوستان توضیحات لازم در رابطه با واحدهای اندازه گیری رو خدمتتون ارائه کردم ، اگر سوالی بود مطرح کنید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

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

دیدگاه ۲

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین