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

واحد های اندازه گیری رو در به دو دسته واحد های مستقل و واحد های وابسته تقسیم‌بندی میکنیم.واحد های مستقل، واحد هایی هستن که اندازه اون ها در هر حالتی ثابت باقی می‌مونه.این واحد ها، به اندازه دیگه ای وابسته نیستن و در تمامی حالت های مختلف صفحه وب سایت، مقدار خودشون رو حفظ می‌کنن.واحد های مستقل عبارتند از:px: پیکسلpt: نقطه یا pointpc: پیکاcm: سانتی مترmm: میلی مترin: اینچواحد px یا پیکسلواحد پیکسل، معمولا جزء رایج‌ترین واحدی هست که در css به کار میره؛ با این حال چون در طراحی واکنش گرا ما رو با چالش مواجه میکنه؛ خیلی استفاده از این واحد توصیه نمیشه.به صورت پیشفرض، اندازه پیکسل ها توی دستگاه های مختلف، می‌تونه متفاوت باشه.ساده بگم، در CSS، اندازه پیکسل با تعریف کوتاه زیر مشخص شده:1px = 1/96 inبدین ترتیب، با توجه به نامتغیر بودن واحد اینچ، ابعاد یک پیکسل در تمامی دستگاه ها یکسان خواهد بود.واحد pt یا نقطهواحد نقطه، شباهت بسیاری به واحد پیکسل داره.این واحد، ثابت و نامتغیر هست و در تمامی دستگاه ها به یک اندازه ظاهر می‌شه.تفاوت واحد نقطه و پیکسل، تنها در اندازه اون هاست. ابعاد واحد نقطه به شکل زیر مشحص می‌شه:1pt = 1/72 inواحد pc یا پیکاواحد پیکا معمولا خیلی مورد استفاده قرار نمیگیره.اندازه اش هم یه اندزه ثابت و نامتغیر هست.1pc = 1/6 inواحد های اینچ، میلی متر و سانتی متراین واحد ها هم در css مورد استفاده قرار نمیگرن، چون کاربردشون در مسائل دیگه‌ای هست.1 in = 2.54 cm = 25.4 mmواحد های وابسته در CSSواحد های وابسته، واحد هایی هستن که اندازه‌هاشون ثابت نیست و بر اساس اندازه های دیگه در صفحه وب سایت ما تعریف می‌شن. مثلا المان والد و فرزند از این المان استفاده بکنند؛ اندازه استفاده شده برای عنصر فرزند بر اساس اندازه والد تغییر پیدا میکنه.مهم ترین این واحد ها، عبارتند از:%vw و vhemchremواحد % یا درصداین واحد، رایج ترین واحد استفاده شده در cssهست . که برای سهولت در طراحی واکنشگرا بهتر هست که از این واحد اندازه گیری استفاده بشهیک عنصر div با کد زیر رو فرض کنین:div{ width: 90%; }تو مثال بالا div ما عرض 90% گرفته، این عنصر تحت هر شرایطی(چه صفحه تبلت باشه ؛ چه صفحه موبایل) هموازه 90% صفحه والد خودش رو اشغال میکنه.واحد های vh و vwاین واحد ها، مخفف عبارات viewport height و viewport width هستن.به قسمتی از صفحه وب که ما مشاهده میکنیم viewportگفته میشه.این واحد ها مثل درصد عمل میکنن؛‌اما وجه تمایزشون در این هست که اندازه هاشون دیگه به والد بستگی نداره بلکه به اندازه صفحه نمایش بستگی داره.به کد زیر توجه کنین:div{ width: 40vw; }توی مثال بالا اندزه عنصر ما همواره 40درصد عرض viewport ماهست. vh هم مشابه vw هست با این تفاوت که ارتفاع عنصر رو برحسب ارتفاع viewport تعریف میکنه.واحد emاین واحد، تغییرات خودش رو بر حسب سایز فونت عنصر پدر انجام می‌ده.فونت ها می‌تونن سایز های متفاوتی داشته باشن، برای آشنایی با سایز فونت در CSS می‌تونین به مقاله font-size در CSS مراجعه کنین.برای درک بهتر این واحد، به کد زیر توجه کنین:کد HTML:<div class=&quotparent&quot> <div class=&quotchild&quot></div> </div>کد CSS:div.parent{ font-size: 16px; } div.child{ width: 3em; }واحد em، همواره به عنوان شاخصی از سایز فونت عنصر پدر عمل می‌کنه.بر اساس کد بالا، عرض عنصر child سه برابر سایز فونت عنصر پدر یا ۴۸ پیکسل خواهد بود.واحد remواحد rem شبیه به em عمل میکنه و تفاوتشون در این هست ک rem تاثیرش رو از روت المنت یا همون تگ html میگیره و دیگه به عنصر والدش وابسته نیست با مثال زیر راحت تر متوجه موضوع میشیمکد HTML:<div class=&quotparent&quot> <div class=&quotchild&quot></div> </div>استایل دهی:*{ font-size: 20px; } div.parent{ font-size: 16px; } div.child{ width: 3rem; }الان دیگه اندازه عنصر div ما بر اساس تگ html محاسبه میشه و مقدار 60پیکسل رو میگیره