در واحدهای نسبی یک اندازه طولی نسبت به یک اندازه طولی دیگر محاسبه می شود به همین دلیل به آنها نسبی می گویند.
زمانی که از واحدهای نسبی در سی اس اس استفاده می کنیم خروجی ما به راحتی می تواند در محیطهای گوناگون وفق پیدا کند.
این واحدها در دوسته واحدهای نسبی وابسته به فونت و واحدهای نسبی وابسته به Viewport قرار می گیرند.
واحدهای نسبی وابسته به فونت
این واحدها در سی اس اس شامل چهار واحد ch, ex, em و rem می باشند.
استفاده از اینگونه واحدها مزیت های زیادی دارد به عنوان نمونه زمانی که کاربر صفحه را بزرگنمایی می کند دیگر فقط متن بزرگ نمی شود بلکه عناصر نگهدارنده متن هم به همان تناسب بزرگ می شوند و این موضوع برای طراحی های دسترسی پذیر و واکنشگرا بسیار سودمند است.
em
این واحد نمایانگر ویژگی font-size می باشد. یعنی 1em برابر مقداری است که برای ویژگی font-size عنصر تعیین می شود.
font-size: 20px;
padding: 2em; /* 2*20px = 40px */
اگر em برای خود font-size استفاده شود آنگاه برای محسابه کردن em باید به font-size پدر عنصر مورد نظر مراجعه کنیم.
این واحد بطور کامل در مطلب “راهنمای کامل em و rem” شرح داده شده است.
ex
از این واحد خیلی به ندرت استفاده می شود. واحد ex بر اساس اندازه ارتفاع کاراکتر x (کوچک) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.
برخی مرورگرها ارتفاع x را دقیقا محاسبه می کنند در حالی که مرورگرهای دیگر برای آن یک مقدار تعیین می کنند که در بیشتر مواقع آن مقدار حدودا 0.5em می باشد.
در مثال زیر ارتفاع خطوط متن را برابر با 230 درصد ارتفاع کاراکتر x قرار می دهیم:
p {
font-family: "Arial", sans-serif;
line-height: 2.3ex;
}
توجه داشته باشید که اگر فونت Arial برای عنصر استفاده شود ارتفاع x آن فونت, مبنا می باشد اما اگر این فونت به هر نحوی در دسترس نباشد و فونت sans-serif برای عنصر استفاده شود اندازه ارتفاع کاراکتر x آن تعیین کننده است.
ch
واحد ch بر اساس اندازه عرض کاراکتر 0 (صفر) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.
به عنوان نمونه در مثال زیر فاصله داخلی عنصر را به اندازه 10 برابر کاراکتر صفر فونتش مشخص کرده ایم:
.element {
padding: 10ch;
}
rem
این واحد کاملا شبیه به em عمل می کند با این تفاوت که به جای اینکه مبنای آن font-size عنصر مورد نظر باشد, اندازه فونتی است که برای عنصر ریشه یا همان <html> توسط ویژگی font-size تعیین شده است.
برای بررسی کامل این واحد به مطلب “راهنمای کامل em و rem” مراجعه کنید.
واحدهای نسبی وابسته به Viewport
این واحدها که شامل چهار واحد vmin, vw, vh و vmax می باشند وابسته به اندازه viewport یا همان قابی از صفحه که در یک لحظه قابل مشاهده توسط کاربر است می باشند.
زمانی که اندازه viewport تغییر کند باید اندازه این واحدها نیز تغییر کند. برای اینکه موضوع راحت تر درک شود فرض کنید اندازه فونت یک متن را با استفاده از یکی از این واحدها تعیین می کنیم. حال اگر پنجره مرورگر را بزرگ یا کوچک کنیم (که این کار باعث می شود اندازه viewport تغییر کند) باید اندازه متن هم نسبت به تغییرات آن تغییر کند.
حال می توان تصور کرد که چقدر استفاده از این واحدها برای زمانی که واکنشگرا طراحی می کنیم می تواند با ارزش باشد. چراکه این واحدها وابسته به اندازه دستگاه یعنی موبایل, تبلت و غیره تغییر می کنند.
vh
vh یا همان viewport height وابسته به ارتفاع viewport است.
یک واحد vh برابر با یک صدم ارتفاع viewport است. یعنی 1vh برابر 1% ارتفاع viewport خواهد بود.
وقتی اندازه فونت یک عنصر را با استفاده از درصد تعیین میکنیم آن درصد بر اساس اندازه فونت عنصر پدرش مورد محاسبه قرار می گیرد.
p {
font-size: 150%;
}
یعنی 150 درصد اندازه فونت عنصر پدر پاراگراف.
اما اگر از واحد vh استفاده کنیم دیگر محاسبات کاری به عنصر نگهدارنده ندارد و مستقیما سراغ Viewport می رود. به عنوان نمونه اندازه فونت عنصر پاراگراف زیر برابر 5 درصد ارتفاع viewport می باشد.
فرض کنید ارتفاع viewport برابر با 400 پیکسل باشد داریم:
p {
font-size: 5vh; /* (5*400)/100 = 20px */
}
دموی زیر را بصورت تمام صفحه باز کنید و ارتفاع مرورگر را کم و زیاد کنید:
See the Pen vh unit by Mojtaba Seyedi (@seyedi) on CodePen.
vw
vw یا همان viewport width وابسته به عرض viewport است.
یک واحد vw برابر با یک صدم عرض viewport است. یعنی 1vw برابر 1% عرض viewport خواهد بود.
این واحد کاملا مشابه با واحد vh عمل می کند با این تفاوت که مربوط به عرض viewport است.
اگر از واحد vw استفاده کنیم به عنوان نمونه اندازه فونت عنصر پاراگراف زیر برابر 5 درصد عرض viewport می باشد.
فرض کنید عرض viewport برابر با 400 پیکسل باشد داریم:
p {
font-size: 5vw; /* (5*400)/100 = 20px */
}
دموی زیر را بصورت تمام صفحه باز کنید و عرض مرورگر را کم و زیاد کنید:
See the Pen vw unit by Mojtaba Seyedi (@seyedi) on CodePen.
vmin
واحد vmin برابر با مینیمم واحدهای vh و vw می باشد. یعنی 1vmin برابر با 1 درصد طول بعد کوچکتر viewport می باشد.
در مثال زیر اندازه فونت p برابر با 10 درصد طول بعد کوچکتر viewport خواهد بود:
p {
font-size: 10vmin;
}
See the Pen vmin unit by Mojtaba Seyedi (@seyedi) on CodePen.
vmax
واحد vmax برابر با ماکزیمم واحدهای vh و vw می باشد. یعنی 1vmax برابر با 1 درصد طول بعد بزرگتر viewport می باشد.
در مثال زیر اندازه فونت p برابر با 10 درصد طول بعد بزرگتر viewport می باشد:
p {
font-size: 10vmax;
}
See the Pen vmax unit by Mojtaba Seyedi (@seyedi) on CodePen.
کدام واحد؟
با وجود این تعداد واحدهای مختلف مطلق و نسبی شاید این سوال در ذهن ایجاد شود که آیا از هر کدام برای یک ویژگی خاص در سی اس اس باید استفاده کنیم؟ یا نه؟
جواب این است که می توان از هر یک از این واحدها برای هر ویژگی که اندازه طولی می پذیرد استفاده کرد.
اما باید به چند نکته توجه کنیم:
1. آیا خروجی ما مانیتور و اسکرین ها هستند؟ یا کاغذ, خروجی مد نظر ما می باشد؟
2. آیا واحد مورد نظر توسط مرورگرهایی که پروژه ما باید پشتیبانی کند, پشتیبانی می شود یا نه؟
3. آیا در حال ساختن ماژولی هستیم که باید به راحتی در جاهای دیگر مورد استفاده قرار گیرد و به راحتی بتوانیم اندازه های موجود در آن را تغییر دهیم بدون اینکه به دردسر بیافتیم؟
این ها سوال هایی هستند که در زمان انتخاب واحدها باید پرسیده شود و جواب آنها و انتخاب واحد مناسب تنها با تمرین و به مرور زمان با تجربه حاصل می شود.
همینطور چنین مطالبی قطعا می توانند به جواب دادن به این سوالات کمک کنند.
همچنین جدول زیر که از این مطلب گرفته شده است را با دقت بررسی کنید:
| توصیه می شود | در موارد خاص | توصیه نمی شود | |
|---|---|---|---|
| صفحه نمایش (screen) | em, px, % | ex | pt, cm, mm, in, pc |
| چاپ | em, cm, mm, in, pt, pc, % | px, ex |
پشتیبانی مرورگر ها
برای بررسی پشتیبانی مرورگرها در مورد واحدهای نسبی وابسته به فونت به این آدرس مراجعه کنید.
همچنین در مورد واحدهای نسبی وابسته به viewport جدول زیر گویای مطلب می باشد:
بیشتر بخوانید
سلام
خیلی خوب بود، ممنون.
پس با این تفاسیر استفاده از vw توی طراحی ریسپانسیو خیلی به درد میخوره، درسته ؟
آیا میشه برای سایز فونت، max و min تعیین کرد ؟ کاری که برای عرض و ارتفاع یک عنصر امکان پذیره.
مثلا بگیم سایز فونت این تگ p برابر با نصف vw باشه و حداکثر سایزش هم مثلا ۴۰ پیکسل باشه
امکانش همچین چیزی وجود داره ؟
کلا کنترل سایز فونت توی طراحی ریسپانسیو یه کم اذیت میکنه، راه حل شما چیه ؟
ببخشید طولانی شد ؛)
سلام.
نه. متاسفانه همچین امکانی وجود نداره.
برای این قضیه راه حل ثابتی وجود نداره. چند تا رویه هست که با توجه به شرایط و سلیقه خودتون انتخاب می شن.
مثلا یکیش اینکه همه اندازه فونت ها واحد نسبی هستند پس به راحتی توی دستگاههای مختلف می تونید “فقط با تغییر اندازه فونت html” همه اندازه ها رو کنترل کنید.
یا اینکه ماژولی کار کنید و هر ماژول رو توی دستگاههای مختلف کنترل کنید.
یا اینکه مراقب هر عنصر باشید. و هر جا لازم بود فونت رو کم و زیاد کنید. که این مورد بیشترین کار رو میبره.
در کل توی یه پروژه امکان داره از همه این موارد هم استفاده کنید و بستگی به طرح و موراد دیگر روش فرق می کنه
موفق باشید.
من دارم مطالب سایتتونو مطالعه میکنم عالییییییییه منتظر مطالب جدید تر و فصل ششم و هشتم هم هستم (لطفا مطالبی راجب به طراحی ریسپانسیو هم بزارید (البته اگه تا الان نذاشتید)) ممنون.
سلام
ممنون بابت مطالب مفید شما.
می خواستم بدونم اگر “در حال حاضر” از واحدهای نسبی وابسته به Viewport
استفاده کنیم “با توجه به پشتیبانی 77 درصدی مرورگرها” ، بعدها کارفرما اعتراض نمی کنه که چرا
توی بعضی از مرورگر ها وب سایتش درست نمایش داده نمیشه ؟
سلام.
کاملا بستگی به پروژه داره دیگه. اگر بنا به طرح گفته شده باشه که باید توی فلان مرورگر درست دیده بشه چرا اعتراض میکنه.
در مورد تمام ویژگی ها و پشتیبانی شون اینو در نظر داشته باشید که می تونید جاهایی که به طرح لطمه وارد نمیشه از اون ویژگی یا مورد خاص استفاده کنید. مثلا اگر با استفاده از این واحد یک عنصری کل صفحه رو بگیره حالا اگر کاربر توی ie باز کنه ارتفاع کمتر از کل صفحه باشه شاید خیلی بد نباشه و بشه این کار رو کرد.
همینطور می تونید از Fallback استفاده کنید:
مرورگری که دومی رو پشتیبانی نمیکنه یک ارتفاع خاص میگیره که بصورت تخمینی نوشته شده
متاسفانه یک قاعده کلی وجود نداره در این موارد همه چی به طرح بستگی داره.
سلام و خسته نباشی آقا مجتبی سایتت خیییلی عالیه
ی سوال خودت از کدوم یک از این واحد ها واسه منوی این سایت استفاده کردی ؟
سلام، ممنونم
از Devtools می تونید استفاده کنید برای چک کردن کدها. em فک کنم :)
این واحدها که شامل چهار واحد vmin, vw, vh و vmax می باشند وابسته به اندازه viewport یا همان قابی از صفحه که که در یک لحظه قابل مشاهده توسط کاربر است می باشند
سید جان یه “ک” کافیه :))
گفتم تاکید بشه :))
سلام
مطلب مفیدی بود اما بعضی چیزها رو متوجه نشدم مثل:
مزیت واحدهای نسبی: زمانی که کاربر صفحه را بزرگنمایی می کند دیگر فقط متن بزرگ نمی شود بلکه عناصر نگهدارنده متن هم به همان تناسب بزرگ می شوند
و همچنین vmin و vmax
اگه توضیحی واضح تر درباره این موارد بدید خیلی بهتر میشه
با تشکر
سلام، به مرور زمان مثال ها و مطالبی رو می‌بینید که فایده هاشون رو به خوبی درک می‌کنید.
سلام
در مورد vh توی مثال شما گفتی که این اندازه 10% ویوپورت خواهد بود:
“اما اگر از واحد vh استفاده کنیم دیگر محاسبات کاری به عنصر نگهدارنده ندارد و مستقیما سراغ Viewport می رود. به عنوان نمونه اندازه فونت عنصر پاراگراف زیر برابر 10 درصد ارتفاع viewport می باشد.
فرض کنید ارتفاع viewport برابر با 400 پیکسل باشد داریم:”
p {
font-size: 5vw; /* (5*400)/100 = 20px */
}
در صورتی که میشه 20% نه 10….چجوری شما گفتی 10؟
سلام، درست میگین اشتباه نوشتم، میشه 20 پیکسل که البته 20 پیکسل، 5 درصد 400 پیکسل هستش. مطلب رو تصحیح کردم.
سلام
سایت w3school از vm استفاده کرده بود
قسمت آموزش ریسپاسیو فونت
دمتون گرم
کامل یاد گرفتم