واحد های مختلفی در CSS برای تعریف کردن اندازه های مختلف وجود داره. واحد های اندازه گیری متفاوت در CSS را کدامند؟ تعداد محدودی از این واحد ها رو در مقالات قبل یاد گرفتیم، اما آیا واحد ها فقط به همین تعداد محدود می‌شن؟
مسلما پاسخ منفیه.
ما واحد ها رو به دو دسته واحد های وابسته و واحد های مستقل دسته بندی میکنیم.
سرفصل‌های پست
واحد های مستقل در CSS
واحد های مستقل، واحد هایی هستن که اندازه اون ها در هر حالتی ثابت باقی می‌مونه.
این واحد ها، به اندازه دیگه ای وابسته نیستن و در تمامی حالت های مختلف صفحه وب سایت، مقدار خودشون رو حفظ می‌کنن.
واحد های مستقل عبارتند از:
- px: پیکسل
- pt: نقطه یا point
- pc: پیکا
- cm: سانتی متر
- mm: میلی متر
- in: اینچ
حالا به تعریف هر کدوم از این واحد ها می‌پردازیم:
واحد px یا پیکسل
واحد پیکسل، عمومی ترین واحد مورد استفاده در CSS به حساب میاد.
جدا از فایده ها و مضرات اون در طراحی وب سایت، اولین واحدی هست که باهاش آشنا می‌شیم 🙂
به صورت پیشفرض، اندازه پیکسل ها در دستگاه های مختلف، می‌تونه متفاوت باشه، اما CSS این مشکل رو با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) در نظر گرفته.
ساده بگم، در CSS، اندازه پیکسل با تعریف کوتاه زیر مشخص شده:
1px = 1/96 in
بدین ترتیب، با توجه به نامتغیر بودن واحد اینچ، ابعاد یک پیکسل در تمامی دستگاه ها یکسان خواهد بود.
واحد pt یا نقطه
واحد نقطه، شباهت بسیاری به واحد پیکسل داره.
این واحد، ثابت و نامتغیر هست و در تمامی دستگاه ها به یک اندازه ظاهر میشه.
تفاوت واحد نقطه و پیکسل، تنها در اندازه اون هاست. ابعاد واحد نقطه به شکل زیر مشحص میشه:
1pt = 1/72 in
واحد pc یا پیکا
واحد پیکا، واحدیه که به اندازه pt و px استفاده نمی‌شه.
اندازه اون هم یک مقدار نامتغیره و به شکل زیر مشخص میشه:
1pc = 1/6 in
واحد های اینچ، میلی متر و سانتی متر
این واحد ها، واحد هایی هستن که از بچگی باهاشون آشنا شدیم و با این واحد ها بزرگ شدیم.
از این واحد ها، به اندازه واحد های قبلی استفاده نمی‌شه، چون کاربردشون تو مسائل دیگه‌ایه.
رابطه بین این سه به شکل زیر مشخص میشه:
1 in = 2.54 cm = 25.4 mm
واحد های وابسته در CSS
واحد های وابسته، واحد هایی هستن که اندازه ی ثابتی ندارن، و بر اساس اندازه های دیگه در صفحه وب سایت ما تعریف می‌شن.
مهم ترین این واحد ها، عبارتند از:
- %
- vw و vh
- em
- ch
- rem
واحد % یا درصد
این واحد، عمومی ترین واحد مستقلی هست که در CSS مورد استفاده قرار میگیره.
یک عنصر div با کد زیر رو فرض کنین:
div{
width: 90%;
}
این عنصر، همواره دارای عرضی برابر با نود درصد عرض عنصر پدر خود خواهد بود.
چه در صفحه دسکتاپ، چه در صفحه تبلت و چه در صفحه تلفن همراه.
در صورت تغییر کردن عرض عنصر پدر، عرض عنصر div هم به تناسب تغییر خواهد کرد، اما همیشه نود درصد عنصر پدر خودش خواهد موند.
واحد های vh و vw
این واحد ها، مخفف و کوتاه شده عبارات viewport height و viewport width محسوب می‌شن.
viewport، به قسمتی از صفحه وب سایت که جلوی ما قرار داره و میبینیم اطلاق میشه.
برای مطالعه بیشتر در مورد viewport، می‌تونین به مقاله واکنش گرایی و ابعاد عناصر در میزفا مراجعه کنین 🙂
این واحد ها، مشابه واحد درصد عمل می‌کنن، با این تفاوت که اندازه اون ها، به اندازه عنصر پدر بستگی نداره، بلکه مستقیما به طول و عرض viewport ما بستگی داره.
به کد زیر توجه کنین:
div{
width: 40vw;
}
کد بالا، بیان میکنه که عرض عنصر div، در هر دستگاه و صفحه نمایشی، همواره باید چهل درصد عرض viewport باشه.
مشابه vw که عرض عنصر رو بر حسب درصدی از عرض viewport تعیین میکنه، vh هم ارتفاع عنصر رو بر حسب درصدی از ارتفاع viewport تعریف میکنه.
واحد em
این واحد، تغییرات خودش رو بر حسب سایز فونت عنصر پدر انجام می‌ده.
فونت ها می‌تونن سایز های متفاوتی داشته باشن، برای آشنایی با سایز فونت در CSS می‌تونین به مقاله font-size در CSS مراجعه کنین.
برای درک بهتر این واحد، به کد زیر توجه کنین:
کد HTML:
<div class="parent"> <div class="child"></div> </div>
کد CSS:
div.parent{
font-size: 16px;
}
div.child{
width: 3em;
}
واحد em، همواره به عنوان شاخصی از سایز فونت عنصر پدر عمل میکنه.
بر اساس کد بالا، عرض عنصر child سه برابر سایز فونت عنصر پدر یا ۴۸ پیکسل خواهد بود.
واحد rem
این واحد، مشابه واحد em عمل میکنه.
با این تفاوت که از سایز فونت عنصر پدر تاثیر نمی‌گیره، بلکه از سایز فونت خود عنصر html تاثیر میگیره.
یه همین دلیل، به این واحد rem یا root em (مربوط به عنصر ریشه وب سایت یا html) گفته میشه.
به کد زیر توجه کنین:
کد HTML:
<div class="parent"> <div class="child"></div> </div>
کد CSS:
*{
font-size: 20px;
}
div.parent{
font-size: 16px;
}
div.child{
width: 3rem;
}
بر خلاف واحد em، توسط واحد rem، عرض عنصر child به اندازه ۶۰ پیکسل تنظیم خواهد شد.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
تو کد زیر، سه div داریم که روی هم قرار گرفتن.
عرض div سوم، ۳۲۰ پیکسل تعریف شده.
این مقدار رو، به جای px، با استفاده از em مجددا تعریف کنین. به شکلی که عرض div سوم دچار هیچگونه تغییری نشه.
dark
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تو این مقاله، با واحد های مستقل و وابسته آشنا شدیم.
فهمیدیم که واحد های مستقل، از هیچ عنصر دیگه ای تاثیر نمی‌گیرن، اما واحد های وابسته، بر خلاف واحد های مستقل، تمام اندازه های خودشون رو از عناصر دیگه می‌گیرن.
سپس انواع این واحد ها رو یاد گرفتیم و دیدیم که چطور میتونیم باهاشون ابعاد عناصرمون رو مشخص کنیم 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
16 پاسخ
/* — root styling —*/
html{
font-size:16px;
}
/* — div0 styling —*/
div.div0{
height:400px;
background-color:rgb(245,245,245);
}
/* — div1 styling —*/
div.div1{
width:50rem;
font-size:2rem;
background-color:indianred;
height:100%;
}
/* — div2 styling —*/
div.div2{
background-color:lightgreen;
height:100%;
width:10em;
}
پاسختون درسته، ممنون ازتون 🙂
سلاام خسته نباشید خیلی ممنونم بابت سایت خوبتون..
من یک سوال دارم
ممظورتون توی این قسمت از عنصر پدر چیه؟! ??
سلام. خواهش میکنیم.
ببین عنصر پدر، همون parent element به حساب میاد. بهش یسری جاها عنصر والد یا عنصر مادر هم شاید بگن 🙂
مثلا کد زیر رو ببین:
تو این کد، عنصر div پدر و عنصر p هم فرزندشه. یعنی داخلش قرار گرفته. امیدوارم منظور رو بهت رسونده باشم.
سلام وقت بخیر مقاله های آموزشی شما خیلی خودمونیه و این خیلی خوبه
جواب سوال این جلسه این میشه:
div.div2
{
background-color: lightgreen;
height: 100%
width: 20em;
}
فقط جواب سوال من با بقیه دوستان یکسان نیست علتش چیه؟
من 320 پیکسل رو برای این که واحد em ش رو در بیارم تقسیم بر فونت سایز والدش کردم
16 / 320 = 20
فقط مسله ای که وجود داره اینه که من با مقاله آموزشی شما متوجه نشدم که چطور مثلا اگر یک عنصر عرضش 320 یا 560 پیکسل باشه چطور واحد em ش رو در بیارم
برای این که اگر اشتباه نکنم عمیقا وارد جزییات نشدید به یک مثال بسنده کردین
ولی در کل من ثبت نام کردم که با مقاله های آموزشی شما ادامه و پیشرفت کنم چون همین سوالی که آخر هر آموزش می پرسید باعث میشه که موفق بشیم
مثلا اگر سوال نمی پرسیدید الان من برای همیشه واحد em رو درک نمی کردم( انقدر پیگیر شدم و تلاش کردم که دیگه برای همیشه برام جا افتاد)
موفق باشید:)
سلام امیر جان. خواهش میکنیم ?
ببین اشتباهی که در پاسخ سوالت داری، اینه که عنصر والد رو به جای اینکه div1 فرض کنی، مستقیما عنصر HTML رو فرض کردی. تفاوت اصلی rem و em در همینه. زمانی که ما میگیم 2rem، منظورمون دو برابر سایز فونت عنصر HTML (عنصر root هم بهش گفته میشه) و زمانی که میگیم 2em، منظورمون دو برابر سایز فونت عنصر والدمون هست.
تگ HTML هم والد به حساب میاد، ولی والد مستقیم یا Direct parent نیست و em فقط رو والد های مستقیم اثر داره (ساده بگم فقط رو پدر اثر داره. نه پدربزرگ و پدر جد و اینا? )
بنابر همین مسائل، تو باید به جای 16 که سایز فونت HTMLعه، سایز فونت 32 که سایز فونت والد مستقیمه رو قرار بدی که در اون صورت میشه 10 و پاسخت درست درمیاد.
در نهایت میتونیم بگیم که واحد em هر عنصر، متناسب با مقدار فونت سایز عنصر والد مستقیم اون عنصر محاسبه میشه. یعنی به شکل زیر:
در مورد مثال ها هم حتما سعی میکنیم در اسرع وقت مثال های بهتری رو براتون اماده کنیم
و در نهایت خوشحالیم که سوالاتی که نوشتیم باعث یادگیری بهترت شده، بازم اگر سوال یا پیشنهادی داشتی حتما و حتما مطرح کن امیر?
سلام وقت شما بخیر
بخاطر این که برام وقت گذاشتید خیلی ممنونم
من سوال رو اشتباه متوجه شدم با جواب خیلی خوب شما کاملا متوجه شدم
اشتباهم این بود که اومدم فونت سایز عنصر پدر بزرگ(html) عنصر div رو تقسیم بر 320 کردم 🙂
در صورتی که پدر مستقیم کلاس سوم div2 عنصر div هست که فونت سایزش 32پیکسل هست
واقعا ممنونم که جوابم رو دادید چون طوری که سوال رو حل کردم هیچ مشکلی نبود ( که تو برنامه نویسی میگن [ خطای منطقی] )
فقط یه چیز دیگه:
از کجا میشه فهمید عنصر والد چه فونت سایزی داره؟
منظورم مثلا چطور بفهمم هر element در Html چه فونت سایز پیش فرضی داره
با inspect این کار کردم ولی جواب دقیق نگرفتم
مثلا تگ div رو فونت سایزش 36 پیکسل نشون داد در صورتی 32 پیکسل هست
آیا راهی هست دقیق متوجه فونت سایز های پیش فرض تگ ها شد؟
موفق باشید 😄
خواهش میکنم امیر. دقیقا به همون خاطر بود که از فونت سایز عنصر HTML استفاده کرده بودی که البته تونستی مشکل رو برطرف کنی?
ببین با inspect کردن میشه این کار رو انجام داد به سادگی، کافیه تو قسمت کد های CSS عبارت font-size رو چک کنی تا ببینی چه مقدار فونت سایزی، چه از طرف خود عنصر و چه از طرف والدینش بهش اختصاص داده شده.
اما اگه هیچ فونت سایزی نوشته نشده اونجا، فونت سایز دیفالت عناصر HTML معمولا از 14 پیکسل الی 18 پیکسل هست (به جز یک عناصر خاص مثل hها). اما اگه با وضعیت پیچیده ای روبرو هستی که فونت ها خیلی متفاوتن و کد CSSای هم برای فونت ها پیدا نمیکنی، میتونی از جاوااسکریپت به سادگی استفاده کنی. مثلا برای یک عنصر span با کلاس f داریم:
let element = document.querySelector('span.f'); let fontSize = window.getComputedStyle(element).getPropertyValue('font-size'); console.log(fontSize);که خط اول عنصر رو انتخاب میکنه، خط دوم مقدار فونت سایز اون المنت رو میگیره و خط سوم هم اون رو در قسمت console پرینت میکنه?
سلام
اگر عرض div2 رو به 10em تغییر بدیم معادل همون 320 پیکسل هست.
چون سایز فونت پدر برابر 32px هست و عرض div2 بر حسب em یک ضریبی از سایز فونت پدر هست
32 * ؟ = 320
؟ = 10em
سلام حسين. كاملا پاسخت درسته، ممنون ازت ?
div.div2{
background-color:lightgreen;
height:100%;
width:10em;
}
استاد عزیز و گرامی سلام!
امیدوارم که درست نوشته باشم
دستتون هم درد نکنه
عالی بود.
سلام مهراسا. خوشحالیم که مقاله خوبی بوده برات. پاسخت هم کاملا درسته، ممنون ازت 🙂
div.div2{
background-color:lightgreen;
height:100%;
width:10em;
}
مهدی جان تشکر، پاسخت صحیحه
پاسخ سوال:
در کلاس div2 به جای 320px عبارت 10em نوشته میشه
div.div2{
background-color:lightgreen;
height:100%;
width:10em;
}
سلام. پاسختون درسته 🙂
در صورت عضو بودن در اکادمی میزفا، حساب کاربریتون شارژ میشه