تکنیک‌های CSS برای تغییر اندازه محتوا بر اساس ارتفاع صفحه نمایش

مقدمه‌ای بر تغییر اندازه با CSS

امروزه با توجه به تنوع دستگاه‌های مختلف از جمله موبایل‌ها، تبلت‌ها و دسکتاپ‌ها، طراحان وب به دنبال راه‌هایی برای تطبیق طراحی وب‌سایت‌ها با اندازه‌های مختلف صفحه نمایش هستند. برای این کار، از تکنیک‌های ریسپانسیو استفاده می‌کنند که یکی از آنها تغییر اندازه محتوا براساس ارتفاع صفحه نمایش است. به این ترتیب، تجربه کاربری بهتری به وجود می‌آید و کاربران می‌توانند محتوای کاملی را بدون نیاز به پیمایش اضافی ببینند.

یکی از روش‌های اصلی برای دستیابی به این هدف، استفاده از ویژگی‌های CSS مانند vh (viewport height) است که اندازه‌گیری بر اساس درصدی از ارتفاع صفحه نمایش انجام می‌شود. این واحد اندازه‌گیری به شما اجازه می‌دهد تا عناصر را با انعطاف بیشتری تنظیم کنید و بر اساس ارتفاع صفحه تغییر دهید.

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

در این مقاله، ما نگاهی دقیق‌تر به تکنیک‌های دیگر خواهیم داشت که می‌توانند در طراحی وب‌سایت‌های ریسپانسیو مؤثر واقع شوند. این شامل استفاده از مدیا کوئری‌ها و ویژگی‌های دیگر CSS برای تغییر اندازه محتوا بر اساس ارتفاع صفحه نمایش است.

همچنین ما یک مثال کامل از کدهای CSS را ارائه خواهیم کرد که به شما در فهم بهتر این تکنیک کمک می‌کند. با استفاده از این کدها، می‌توانید ویژگی‌های ریسپانسیو را به وب‌سایت خود اضافه کنید و تجربه کاربری ایده‌آلی را ارائه دهید.

مثالی از کد CSS برای ریسپانسیو کردن طراحی

<style>
  .header {
    height: 50vh; /* ارتفاع 50 درصدی از ارتفاع صفحه نمایش */
    background-color: #4CAF50;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
  }

  @media (max-height: 600px) {
    .header {
      font-size: 1.5em; /* تغییر اندازه فونت برای صفحه‌های کوچک‌تر */
    }
  }
</style>

<style> - تگ استایل برای درج کدهای CSS داخلی استفاده می‌شود.

.header - کلاسی است که برای تغییر ظاهر بخش بالایی سایت استفاده می‌شود.

height: 50vh; - ارتفاع این بخش را به 50 درصد کل ارتفاع صفحه نمایش تنظیم می‌کند.

background-color: #4CAF50; - رنگ زمینه سبز بخش بالایی سایت را تعیین می‌کند.

display: flex; - این عنصر به عنوان یک ظرف فلکس تنظیم می‌شود.

justify-content: center; و align-items: center; - این تنظیمات متن را مرکز می‌کند.

font-size: 2em; - اندازه فونت نوشته درون این بخش را تنظیم می‌کند.

color: white; - رنگ متن را سفید تنظیم می‌کند.

@media (max-height: 600px) - یک مدیا کوئری برای اعمال قوانین خاص بر روی صفحه‌های با ارتفاع کمتر از 600 پیکسل.

font-size: 1.5em; - تغییر اندازه فونت برای صفحه‌های کوچک‌تر در محدوده مدیا کوئری.