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

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

دسته بندی موضوعات
سفارش تبلیغات

واحدهای اندازه گیری در 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 سایز ۱۲ پیسکل رو در نظر گرفتیم . عدد و واحد اندازه گیری بدون فاصله در کنار یکدیگر قرار میگیرند .

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • حسام

    احتراماً توی مقاله بالا اشاره نشده که از واحد em هم برای طراحی واکنش گرا زیاد استفاده میشه

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟