کارت گیره

در این نسخه ی نمایشی، عرض را با استفاده از clamp() تنظیم می کنید مانند: width: clamp(<min>, <actual>, <max>) .

این یک حداقل و حداکثر اندازه مطلق و یک اندازه واقعی را تعیین می کند. با مقادیر، می تواند شبیه به این باشد:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

حداقل اندازه در اینجا 23ch یا 23 واحد کاراکتر و حداکثر اندازه 46ch ، 46 کاراکتر است. واحدهای عرض کاراکتر بر اساس اندازه قلم عنصر (به ویژه عرض علامت 0 ) است. اندازه "واقعی" 50٪ است که 50٪ از عرض اصلی این عنصر را نشان می دهد.

کاری که تابع clamp() در اینجا انجام می دهد این است که این عنصر را قادر می سازد تا عرض 50% را حفظ کند تا زمانی که 50% یا بزرگتر از 46ch (در ویوپورت های عریض تر)، یا کوچکتر از 23ch (در نمای کوچکتر) شود. در این ویدئو، ببینید که چگونه عرض این کارت به حداکثر نقطه گیره شده خود افزایش می یابد و با کشیده شدن و کوچک شدن والد به حداقل گیره کاهش می یابد. سپس در والد با استفاده از ویژگی‌های اضافی برای وسط می‌ماند. این طرح‌بندی‌های خواناتر را امکان‌پذیر می‌کند، زیرا متن خیلی عریض (بالاتر از 46ch ) یا خیلی فشرده و باریک (کمتر از 23ch ) نخواهد بود.

می توانید از این تکنیک برای پیاده سازی تایپوگرافی واکنش گرا استفاده کنید. به عنوان مثال: font-size: clamp(1.5rem, 20vw, 3rem) . در این حالت، اندازه فونت یک عنوان همیشه بین 1.5rem و 3rem ثابت می‌ماند، اما بر اساس مقدار واقعی 20vw بزرگ و کوچک می‌شود تا با عرض درگاه دید متناسب شود.

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

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }