𔓙
واحد های اندازه گیری svh , dvh , vh و تفاوت هاشون در css 🔵
🔵در CSS، واحدهای اندازه‌گیری dvh، svh و vh به ترتیب به معنای "درصد ارتفاع نمای دید" (viewport height) هستن، اما هر کدوم کاربرد و رفتار خاص خودشون رو دارن.
1️⃣vh (Viewport Height) :
این واحد به معنای 1 درصد از ارتفاع نمای دید (viewport) هست. به عنوان مثال، 100vh برابر با 100 درصد از ارتفاع نمای دیده.و اگر کاربر اندازه پنجره مرورگر رو تغییر بده، اندازه‌های مبتنی بر vh نیز به طور اتوماتیک تغییر میکنه.
2️⃣dvh (Dynamic Viewport Height) :
این واحد مشابه vh هست، اما به طور خاص برای نمای داینامیک طراحی شده. به این معنی که dvh به تغییرات ارتفاع نمای دید در حین نمایش محتوای پویا (مثل کیبورد موبایل) حساسه. به عنوان مثال، اگر کیبورد در دستگاه‌های موبایل باز بشه، dvh ممکنه کمتر از vh باشه چون ارتفاع قابل مشاهده کاهش پیدا میکنه.
3️⃣svh (Small Viewport Height) :
این واحد هم به ارتفاع نمای دید مربوط میشه، اما به ارتفاع کوچکترین حالت نمای دید اشاره داره. این به این معناست که svh همیشه برابر با کمترین ارتفاع نمای دیده که می‌تونه در هر زمان وجود داشته باشه. به عنوان مثال، اگه کاربر کیبورد رو باز کنه، svh ممکنه به اندازه‌ای کاهش پیدا کنه که فقط ارتفاع کوچکترین حالت رو نشون بده.
‼️تفاوت‌های این واحد های اندازه گیری :
تغییرات داینامیک: dvh و svh به تغییرات دینامیک در صفحه (مثل باز شدن کیبورد) حساس‌تر هستند، در حالی که vh ثابته.
✅و برای طراحی‌های واکنش‌گرا و بهینه‌سازی تجربه کاربری در دستگاه‌های موبایل، استفاده از dvh و svh می‌تونه مفیدتر باشه.
این واحدها به شما کمک می‌کنن تا تجربه کاربری بهتری رو در دستگاه‌های مختلف فراهم کنید.
#css #styling
@CodeModule
27 · 1.2K ·