چیدمان محتویات در بسته های مختلف

روز گذشته داشتم روی طرح بندی مقاله کار می کردم و به مشکل جالبی برای حل برخوردم. اینجاست:

همانطور که می بینید، ما موارد زیر را داریم:

• سربرگ: لوگو و ناوبری
• عنوان مقاله: عنوان و تیزر
• محتوای بدن

هدر با یک عنصر با عرض ثابت پیچیده شده است که به صورت افقی در مرکز قرار دارد.

header class="site-header">
  div class="wrapper">
    
  div>
header>

.wrapper {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

عنوان مقاله در هیچ چیز پیچیده نیست و خود به خود زندگی می کند.

header class="site-header">
  div class="wrapper">
    
  div>
header>
div class="article-header">
  h1>h1>
  p>!-- Description -->p>
div>

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

در شکل بعدی، اندازه صفحه نمایش بزرگتر شده است. توجه کنید که چگونه سرصفحه مقاله با لوگو هماهنگ نیست.

هنگامی که اندازه صفحه نمایش کوچکتر است، مشکل نیز ظاهر می شود.

به طور خلاصه، مشکلی که ما در اینجا سعی در حل آن داریم این است که داشته باشیم padding-left مقداری که بر اساس فاصله از لبه سمت چپ صفحه تا ابتدای بسته بندی محتوا پویا است.

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

برای رسیدن به این هدف، باید مقداری ریاضی انجام دهیم. در اینجا به کلمات ساده آمده است:

پد پویا = (عرض درگاه دید – عرض لفاف) / 2

بیایید مثال زیر را در نظر بگیریم.

با توجه به مقادیری که داریم، در اینجا مقدار padding پویا آمده است:

پر پویا = (1300 – 1100) / 2 = 100

شاید از خود بپرسید که چرا تقسیم بر 2 است؟ خوب، از آنجایی که ما مناطق پویا در سمت چپ و راست داریم، فقط به یک طرف نیاز داریم.

راه حل

در CSS برای دستیابی به موارد فوق از موارد زیر استفاده خواهیم کرد:

• واحدهای نما
• تابع calc().
• تابع مقایسه max().
• متغیرهای CSS

می توانیم از مقدار استفاده کنیم 100vw برای به دست آوردن عرض کامل درگاه دید

.article-header {
  padding-left: calc(100vw - calc(1100px / 2));
}

بنابراین، ارزش padding-left پویا خواهد بود و محتوای سرصفحه مقاله را با آرم و ناوبری هماهنگ می کند.

با این حال کار ما تمام نشده است. باید حساب کنیم .wrapper پد افقی

.article-header {
  padding-left: calc(100vw - calc(1100px / 2) - 32px);
}

را 32px مجموع لنت های چپ و راست است.

دست زدن به پد تلفن همراه

از آنجایی که مقدار pad را از wrapper حذف کردیم، پد هدر مقاله در دستگاه های تلفن همراه پوچ خواهد بود.

برای بازگرداندن padding، باید از CSS کمک بگیریم max() تابع هدف این است که به او یک حداقل مقدار برای پد

.article-header {
  padding-left: max(1rem, calc(100vw - calc(1100px / 2) - 32px));
}

بنابراین، پد افقی حداقل خواهد بود 1remو زمانی پویا می شود که اندازه ویوپورت بزرگتر شود.

می توانید در مورد آن بیشتر بدانید max() و دوست او در این مقاله از شما واقعا.

استفاده از متغیرهای CSS

برای انتزاعی‌تر کردن موارد، می‌توانیم همه موارد بالا را به یک متغیر CSS اضافه کنیم تا بتوانیم از آن در مکان‌های مختلف استفاده کنیم.

:root {
  --wrapper-width: 1100px;
  --wrapper-padding: 16px;
  --space: max(
    1rem,
    calc(
      (
          100vw - calc(var(--wrapper-width) - var(--wrapper-padding) *
                2)
        ) / 2
    )
  );
}

.article-header {
  padding-left: var(--space);
}

تنها مشکل با 100vw

در سیستم عامل مک، نوارهای پیمایش به طور پیش فرض قابل مشاهده نیستند مگر اینکه کاربر این مورد را در تنظیمات سیستم انتخاب کرده باشد. اگر نوارهای اسکرول به طور پیش فرض قابل مشاهده هستند، 100vw برابر با 100% عرض پنجره منهای عرض نوار اسکرول خواهد بود. این منجر به مشکل عدم تطابق خواهد شد.

از آنجایی که عنصر در لفاف زندگی نمی کند، می توانیم جایگزین کنیم 100vw با 100% در عوض و همانطور که انتظار می رود کار خواهد کرد.

:root {
  --wrapper-width: 1100px;
  --wrapper-padding: 16px;
  --space: max(
    1rem,
    calc(
      (100% - calc(var(--wrapper-width) - var(--wrapper-padding) * 2)) /
        2
    )
  );
}

.article-header {
  padding-left: var(--space);
}

تاریخ انتشار: 15 مارس 2022

دنی وینتر آن را به من یادآوری کن max() ریاضی را بدون نیاز انجام خواهد داد calc() تابع تمیز!

:root {
  --space: max(
    1rem,
    100% - (var(—wrapper) - ((var(—wrapper-padding) * 2) / 2))
  );
}

به قلم نگاه کن
بدون عنوان توسط احمد شادید (@shadeed)
در CodePen.

این برای این ترفند کوچک CSS است. امیدوارم چیز جدیدی یاد گرفته باشید!