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

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

اگر با زبان CSS آشنایی داشته باشید حتما میدونید که بعضی از ویژگی های این زبون مقداری رو به عنوان اندازه ی طولی اون ویژگی می پذیرند . ویژگی هایی مثل width , height , font-size و امثالهم !  برای این اندازه ها واحدهای مختلفی در نظر گرفته شده . امروز می خوایم در این مقاله در مورد انواع مختلف واحدهای اندازه در CSS صحبت کنیم .

واحدهای اندازه گیری در CSS  واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS Units of measurement in 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 پیکسل ، یک پیکسل یک نقطه روی صفحه نمایش مانیتور محسوب میشه

:: رابطه ی بین واحدهای معروف استفاده شده به شکل زیر می باشد :

اگر خط کش دارید میتونید ارتفاع ناحیه ی سبز رنگ فوق رو اندازه بگیرید که برابر با ۱ اینچ (۲٫۵۴ سانتیمتر) هست !

واحدهایی که در باکس سبز رنگ فوق آورده شده اصطلاحا absolute units گفته می شن . یعنی اینکه اندازه ی اون ها همواره ثابت هست . چه روی کاغذ باشه ، چه روی مانیتورهایی با رزولوشن متفاوت . از این جهت که سایز صفحه نمایش مانیتورها متفاوته پیشنهاد می شه از این واحدها در صفحات وب مخصوص نمایش روی مانیتور ها استفاده نکنید. صفحه نمایش های کوچکی مثل موبایل ها ممکنه تا ۸ سانتیمتر کوچیک و صفحه نمایش بعضی مانیتور ها تا ۸۰cm هم ممکنه باشه و نمایش طول ثابت ۱ سانتیمتر در این دو ثابته ، ولی نسبت به اندازه ی اونها خیلی فرق میکنه !
:: پس بهتره از واحدهایی مثل px ، em و درصد % استفاده کنید که وابسته به اندازه ی صفحه نمایش هستند!
در زیر جدولی رو براتون آوردم که مقایسه ی بین اندازه ی ۴ واحد معروف px , pt , em و % هست و مقادیر معادل هر کدوم رو به سه واحد حساب کرده :

Pixel EM Percent Point
۶px ۰٫۳۷۵em ۳۷٫۵% ۵pt
۷px ۰٫۴۳۸em ۴۳٫۸% ۵pt
۸px ۰٫۵em ۵۰% ۶pt
۹px ۰٫۵۶۳em ۵۶٫۳% ۷pt
۱۰px ۰٫۶۲۵em ۶۲٫۵% ۸pt
۱۱px ۰٫۶۸۸em ۶۸٫۸% ۸pt
۱۲px ۰٫۷۵em ۷۵% ۹pt
۱۳px ۰٫۸۱۳em ۸۱٫۳% ۱۰pt
۱۴px ۰٫۸۷۵em ۸۷٫۵% ۱۱pt
۱۵px ۰٫۹۳۸em ۹۳٫۸% ۱۱pt
۱۶px ۱em ۱۰۰% ۱۲pt
۱۷px ۱٫۰۶۳em ۱۰۶٫۳% ۱۳pt
۱۸px ۱٫۱۲۵em ۱۱۲٫۵% ۱۴pt
۱۹px ۱٫۱۸۸em ۱۱۸٫۸% ۱۴pt
۲۰px ۱٫۲۵em ۱۲۵% ۱۵pt
۲۱px ۱٫۳۱۳em ۱۳۱٫۳% ۱۶pt
۲۲px ۱٫۳۷۵em ۱۳۷٫۵% ۱۷pt
۲۳px ۱٫۴۳۸em ۱۴۳٫۸% ۱۷pt
۲۴px ۱٫۵em ۱۵۰% ۱۸pt
در صفحاتی که مخصوص پرینت شدن طراحی میشن از واحد های absolute استفاده بشه تا نمایش اونها در صفحه وب و صفحه مانیتور کاملا یکسان و به یک سایز باشه . در صورتی که در صفحات وب که نمی خواید مخصوص پرینت شدن باشه از واحد های px ، % و em استفاده کنید.

در css روش‌های مختلفی برای تعیین اندازه المان‌ها وجود دارد. این روش‌ها به دو نوع مطلق (Absolute) و نسبی (Relative) تقسیم می‌شوند. برای انواع مطلق، می‌توان واحد‌هایی مانند اینچ، سانتیمتر، Points و برای واحد‌های نسبی می‌توان مواردی مانند درصد و یا em را نام برد. شما ممکن است در یک فایل css از چند روش به صورت همزمان استفاده کنید.

لیستی این واحد‌های اندازه گیری به شرح زیر اشت:

  1. واحدهای اندازه‌‌گیری نسبی (Relative Lengths)
    • em
    • ex
    • ch
    • rem
    • vw
    • vh
    • vmin
    • vmax
    • %
    • px
  2. واحد‌های اندازه‌گیری مطلق (Absolute Lengths)
    1. cm
    2. mm
    3. in
    4. pt
    5. pc

استفاده از em

این واحد اندازه‌گیری معمولا برای تایپوگرافی استفاده می‌شود. مبنای اندازه در یک تایپ‌فیس اندازه حرف M بزرگ انگلیسی هست.

۱em برابر است با: 

۱em = 16px = 0.17in = 12pt == 1pc = 4.2mm = 0.42cm

استفاده از ex

از ex جهت تعیین اندازه x-height به صورت نسبی برای فونت‌ها استفاده می‌شود. x-height ارتفاع فونت‌ها را بر مبنای حرف x کوچک انگلیسی تعیین می‌نماید.

واحدهای اندازه گیری در CSS واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS x height3

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

استفاده از ch

واحد ch شبیه ex هست با این تفاوت که با تغییر font-family تغییر می‌کند.

استفاده از rem

واحد اندازه گیری rem مشابه em است، اما همیشه از المان اصلی ریشه (root) ارث‌ می‌برد. منظور از المان اصلی ریشه در یک ساختار استاندارد همان المان HTML است. برای درک بهتر تفاوت rem با em تصویر زیر را مشاهده کنید.

li-rem واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS li rem

استفاده از vw

مبنای این اندازه‌گیری ۱٪ از اندازه عرض viewport هست. با توجه به اینکه viewport ممکن است در دستگاه‌های مختلف (مونیتور، تبلت، گوشی و … ) متغییر باشد، استفاده از vw در تعیین اندازه مفید خواهد بود. منظور از Veiwport همان اندازه نمایش مرورگر است و اگر برای مثال این اندازه ۱۲۸۰ پیکسل باشد وقتی ما اندازه ۳vw را برای المان خودمان تعریف کنیم با توجه به عدد ۱۲۸۰ باید اندازه حدود ۳۸٫۴px را داشته باشیم. البته مشخص است که این عدد با تغییر اندازه صفحه مرورگر تغییر خواهد کرد.

استفاده از vh

تمامی موارد گفته شده برای vw برای vh هم صدق می‌کند با این تفاوت که این بار ارتفاع viewport مد نظر خواهد بود.

استفاده از vmin و vmax

این واحد مورد تکمیلی برای تعیین اندازه با viewport است. در واقع اگر شما از vmin استفاده کنید در بین ارتفاع و عرض viewport اندازه‌ی کوچکتر به عنوان مبنا انتخاب خواهد شد. در مقابل vmax بین عرض و ارتفاع، اندازه بزرگتر را به عنوان مبنا قرار خواهد داد.

استفاده از %

واحد اندازه‌گیری درصد بر مبنای اندازه المان والد تعیین می‌شود.

استفاده از cm و mm و in

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

۱cm = 37.8px      ۱mm = 3.78px     ۱in = 96px

استفاده از pt

شما می‌توانید از point برای تعیین اندازه المان‌ها یا فونت استفاده کنید. در واقع point یک واحد اندازه‌گیری فیزیکی است و هر point معادل ۱/۷۲ اینچ هست.

استفاده از pc

داستان pica یا همان pc هم مانند point هست. هر pc معادل دوازده point هست. 

۱pc == 12pt

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

 

 

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

دیدگاه خود را بیان کنید