در CSS، برای کنترل اندازه عناصر از ویژگی‌های width (عرض) و height (ارتفاع) استفاده می‌شود.

بسته به نیاز طراحی، می‌توان از مقادیر ثابت، درصدی و خودکار برای تعیین اندازه عناصر استفاده کرد. در این مقاله، این روش‌ها را به‌طور کامل بررسی می‌کنیم.

۱. تعیین اندازه به‌صورت ثابت (Fixed Size)

در این روش، مقدار طول و عرض با واحدهای مشخصی مانند px, em, rem, vh, vw تعیین می‌شود. اندازه عنصر در این حالت تغییر نمی‌کند مگر اینکه مقدار آن را تغییر دهیم.

✅ استفاده از پیکسل (px)

.box {
    width: 300px;
    height: 150px;
    background-color: lightblue;
}

🔹 نتیجه: عنصر همیشه عرض ۳۰۰ پیکسل و ارتفاع ۱۵۰ پیکسل خواهد داشت، بدون توجه به اندازه صفحه.

✅ استفاده از واحدهای نسبی (em و rem)

واحدهای em و rem بر اساس اندازه فونت محاسبه می‌شوند.

• em بر اساس اندازه فونت عنصر والد تعیین می‌شود.
• rem بر اساس اندازه فونت ریشه (html { font-size: 16px; }) محاسبه می‌شود.

.box {
    width: 20em;
    height: 10em;
    background-color: lightcoral;
}

🔹 نتیجه: اندازه عنصر وابسته به اندازه فونت صفحه خواهد بود.

✅ استفاده از vh و vw (ارتفاع و عرض متناسب با صفحه)

• 1vw معادل ۱٪ از عرض کل صفحه نمایش است.
• 1vh معادل ۱٪ از ارتفاع کل صفحه نمایش است.

.box {
    width: 50vw; /* نصف عرض صفحه */
    height: 30vh; /* ۳۰٪ ارتفاع صفحه */
    background-color: lightgreen;
}

🔹 نتیجه: اندازه عنصر بر اساس ابعاد صفحه نمایش تنظیم می‌شود.

۲. تعیین اندازه به‌صورت درصدی (Percentage %)

در این روش، مقدار عرض و ارتفاع به‌صورت درصدی از اندازه عنصر والد تعیین می‌شود.

.container {
    width: 500px;
    height: 300px;
    background-color: gray;
}

.box {
    width: 50%;  /* ۵۰٪ عرض والد */
    height: 50%; /* ۵۰٪ ارتفاع والد */
    background-color: yellow;
}

🔹 نتیجه: عنصر .box ۵۰٪ از اندازه عنصر والد .container خواهد بود.

📌 کاربرد درصدی در طراحی ریسپانسیو

✅ مناسب برای طراحی ریسپانسیو (Responsive)، چون عناصر نسبت به والد تغییر اندازه می‌دهند.
❌ اما height: % فقط وقتی عمل می‌کند که والد آن ارتفاع مشخصی داشته باشد.

۳. تعیین اندازه به‌صورت خودکار (auto)

مقدار auto باعث می‌شود که اندازه عنصر بر اساس محتوای داخلی تنظیم شود.

.box {
    width: auto;
    height: auto;
    background-color: lightpink;
    padding: 20px;
}

🔹 نتیجه:

• عرض و ارتفاع عنصر به اندازه محتوای داخل آن تنظیم می‌شود.
• اگر متن داخل عنصر بیشتر شود، ارتفاع به‌طور خودکار افزایش می‌یابد.

۴. مقایسه روش‌های تعیین اندازه در CSS

۵. ترکیب روش‌های مختلف برای طراحی بهینه

در طراحی مدرن، ترکیب این روش‌ها باعث می‌شود طراحی واکنش‌گرا و انعطاف‌پذیرتر شود.

.container {
    width: 80vw;
    max-width: 1200px;
    height: auto;
    padding: 20px;
    background-color: #f0f0f0;
}

🔹 نتیجه:
✅ عرض عنصر حداکثر ۱۲۰۰ پیکسل خواهد بود، اما در صفحه‌های کوچک‌تر ۸۰٪ عرض صفحه را می‌گیرد.
✅ ارتفاع آن خودکار تنظیم می‌شود تا متناسب با محتوای داخلی باشد.

۶. نتیجه‌گیری

✅ px و em برای اندازه‌های ثابت مناسب هستند، اما ریسپانسیو نیستند.
✅ % اندازه را متناسب با والد تنظیم می‌کند و برای طراحی واکنش‌گرا ایده‌آل است.
✅ auto باعث می‌شود که اندازه عنصر به‌صورت پویا و متناسب با محتوای داخل آن تغییر کند.