در css روشهای مختلفی برای تعیین اندازه المانها وجود دارد. این روشها به دو نوع مطلق (Absolute) و نسبی (Relative) تقسیم میشوند. برای انواع مطلق، میتوان واحدهایی مانند اینچ، سانتیمتر، Points و برای واحدهای نسبی میتوان مواردی مانند درصد و یا em را نام برد. شما ممکن است در یک فایل css از چند روش به صورت همزمان استفاده کنید.
لیستی این واحدهای اندازه گیری به شرح زیر اشت:
- واحدهای اندازهگیری نسبی (Relative Lengths)
- em
- ex
- ch
- rem
- vw
- vh
- vmin
- vmax
- %
- px
- واحدهای اندازهگیری مطلق (Absolute Lengths)
- cm
- mm
- in
- pt
- pc
استفاده از em
این واحد اندازهگیری معمولا برای تایپوگرافی استفاده میشود. مبنای اندازه در یک تایپفیس اندازه حرف M بزرگ انگلیسی هست.
div { width: 40em; }
۱em برابر است با:
۱em = 16px = 0.17in = 12pt == 1pc = 4.2mm = 0.42cm
استفاده از ex
از ex جهت تعیین اندازه x-height به صورت نسبی برای فونتها استفاده میشود. x-height ارتفاع فونتها را بر مبنای حرف x کوچک انگلیسی تعیین مینماید.
استفاده از ch
واحد ch شبیه ex هست با این تفاوت که با تغییر font-family تغییر میکند.
div { width: 60ch; }
استفاده از rem
واحد اندازه گیری rem مشابه em است، اما همیشه از المان اصلی ریشه (root) ارث میبرد. منظور از المان اصلی ریشه در یک ساختار استاندارد همان المان HTML است. برای درک بهتر تفاوت rem با em تصویر زیر را مشاهده کنید.
استفاده از vw
مبنای این اندازهگیری ۱٪ از اندازه عرض viewport هست. با توجه به اینکه viewport ممکن است در دستگاههای مختلف (مونیتور، تبلت، گوشی و … ) متغییر باشد، استفاده از vw در تعیین اندازه مفید خواهد بود. منظور از Veiwport همان اندازه نمایش مرورگر است و اگر برای مثال این اندازه ۱۲۸۰ پیکسل باشد وقتی ما اندازه ۳vw را برای المان خودمان تعریف کنیم با توجه به عدد ۱۲۸۰ باید اندازه حدود ۳۸٫۴px را داشته باشیم. البته مشخص است که این عدد با تغییر اندازه صفحه مرورگر تغییر خواهد کرد.
استفاده از vh
تمامی موارد گفته شده برای vw برای vh هم صدق میکند با این تفاوت که این بار ارتفاع viewport مد نظر خواهد بود.
استفاده از vmin و vmax
این واحد مورد تکمیلی برای تعیین اندازه با viewport است. در واقع اگر شما از vmin استفاده کنید در بین ارتفاع و عرض viewport اندازهی کوچکتر به عنوان مبنا انتخاب خواهد شد. در مقابل vmax بین عرض و ارتفاع، اندازه بزرگتر را به عنوان مبنا قرار خواهد داد.
استفاده از %
واحد اندازهگیری درصد بر مبنای اندازه المان والد تعیین میشود.
استفاده از px
حس میکنم این واحد اندازه گیری به قدری استفاده شده که نیازی به توضیح ندارد 🙂
استفاده از cm و mm و in
در واقع شاید استفاده از واحدهای اندازهگیری سانتیمتر، میلیمتر و یا اینچ در طراحی وب کاربردی نداشته باشد. ولی به هر حال این واحدها هم برای اندازهگیری وجود دارند. در زیر معادل هر کدام را بر اساس پیکسل مشاهده میکنید.
۱cm = 37.8px
۱mm = 3.78px
۱in = 96px
استفاده از pt
شما میتوانید از point برای تعیین اندازه المانها یا فونت استفاده کنید. در واقع point یک واحد اندازهگیری فیزیکی است و هر point معادل ۱/۷۲ اینچ هست.
استفاده از pc
داستان pica یا همان pc هم مانند point هست. هر pc معادل دوازده point هست.
۱pc == 12pt
نتیجه:
این که کدام یک از اینها در کجا کاربرد دارند و یا در کجا استفاده میشوند کاملا به خود شما بستگی دارد. شما باید بر اساس نوع محتوا ،صفحه نمایشهای مختلف و موارد دیگر تصمیم بگیرید. فقط توجه کنید که قبل از استفاده از آنها در صورت نیاز از سایت Can I Use بررسی کنید که چه مرورگرهایی آنها را پشتیبانی میکند.
ممنون از شما این مطلبو به شاگردا م معرفی کردم تا یک جا همه رو ببینن
یکی از بهترین مطالب فنی فارسی بود که تا به حال خوندم.
یکی از کاربردیترین مطالب بود. ممنونم.
خیلی جامع و کاربردی بود .. ممنون
سلام
ممنونم برای این پست خیلی خوب
یک سوال وقتی ۱۰۰% در ارتفاع داشته باشیم با مقدار ۱۰۰vh یکی هست؟
خیلی خوب بود .