Tailwind: طراحی واکنش‌گرا

خب طرحمون تا اینجای کار یه شکل کلی به خودش گرفته اما توی نمایشگر‌هایی با رزولیشن‌های مختلف کلا به هم می‌ریزه و اون چیزی نیست که می‌خوایم. این دو تا تصویر رو ببینید:

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

خب الان که می‌دونیم دقیقا بایدچه کاری بکنیم اول از همه باید ساختار ساختمان طرح رو کمی تغیر بدیم. پس یک div می‌سازیم و به اون کلاس flex می‌دیم که در واقع display دی‌ای‌وی رو برابر flex قرار می‌ده. حالا کل طرح رو منتقل می‌کنیم به این div. داخل همین div با کلاس flex و زیر div طرحمون یه div می‌سازیم و داخلش یه کپی از img عکس قرار می‌دیم که فعلا یه کپی از عکسمون اون زیر نمایش میده ولی می‌خوایم با فلکس تصویرمون رو به دو نیم تقسیم کنیم که می‌گم چطوری. برای اینکه سر در گم نشید این کد رو ببینید:

شروع طراحی واکنش‌گرا

در Tailwind به صورت پیش‌فرض چهار نقطه‌ی شکست (BreakPoint) تعبیه شده.
sm: برای عرض کم min-width: 640px
md: برای عرض متوسط min-width: 768px
lg: برای عرض زیاد min-width: 1024px
xl: برای عرض خیلی زیاد min-width: 1280px
خب حالا چطوری از این‌ها استفاده کنیم؟ خیلی راحت. توی طرح می‌خوایم عکسمون در حالت عریض مخفی بشه و عکس سمت چپ نمایش داده بشه پس برای عکس اصلی کلاس lg:hidden رو اضافه می‌کنیم که به این معنی که در دستگاه‌هایی که کمینه‌ی عرضشون 1024 هست display این عکس رو برابر none قرار بده و وقتی عرضمون کمتر از 1024 بود باز اون رو بلاک کن. پس باید برای عکسی که می‌خوایم سمت چپ نمایش داده بشه هم به شکل زیر کلاس بدیم:

به صورت پیش فرض display:none و در دستگاه‌های عریض display:block باشه. برای اینکه دو تا دیو اصلی که داخل دیو فلکس هستند عرض 50٪ در نظر بگیره به هردو کلاس lg:w-1/2 رو می‌دیم.
پس به همین راحتی یکی از نقاط شکست رو می‌نویسیم یه : جلوش می‌ذاریم و استایل مد نظرمون رو می‌نویسیم. به کد زیر نگاه کنید کامل متوجه می‌شید که چکار کردم. این کد دیو محتوای اصلیمون هستش که لوگو و عکس و متن‌ها داخلش قرار دارند:

max-w-md: بیشترین عرض رو برابر 28rem قرار دادیم که برای دستگاه‌های با عریض خیلی باریک میشه پس:
sm:max-w-xl : این رو قرار دادیم که در دستگاه‌های عریض یعنی از 640px به بالا max-width رو برابر 36rem قرار دادیم
mx-auto: برای اینکه در هر صورت مارجین چپ و راست auto باشه
lg:w-1/2 : رو گفتم که برای اینکه در صفحات عریض عرض این دیو بشه 50٪ و بیاد سمت راست.
lg:max-w-full : در صفحات عریض عرض دیو برابر 100٪ قرار بگیره
lg:py-20 lg:px-12 : چون در صفحات عریض عکس داخل این دیو مخفی میشه پس متن‌ها می‌چسبند به بالای تصویر برای اینکه بیان وسط عکس روبه‌رو از مارجین عمودی و افقی بیشتر استفاده کردیم.

کاور کردن عکس‌ها

عکسی که در صفحات عریض سمت چپ تصویر نمایش داده می‌شه عرض و ارتفاع نامناسبی داره پس برای حل این مشکل اومدم این کار رو کردم یه نگاه ‌به کد‌ها بندازید:

به دیو کلاس lg:relative دادیم که در صفحات عریض position: relative بشه این باعث میشه که وقتی به عکسی که داخل این دیو هست position: absolute بدیم بتونیم داخل المان مادر به راحتی جا به جاش کنیم. چون هر دوی این دیو‌ها رو داخل یک دیو با کلاس flex قرار دادیم پس ارتفاع این دیو برابر ارتفاع دیو بغل دستیش(همونی که متن‌ها و لوگو و ... توش هستند) قرار داده می‌شه. پس می‌خوایم ارتفاع عکس به اندازه‌ی ارتفاع دیو بغل دستی کشیده بشه و عرضش هم بشه 100٪ المان مادرش، برای این کار این چند کلاس رو به عکس می‌دیم:
inset-0: چپ و راست بالا و پایین رو برابر 0 قرار می‌ده.
h-full: ارتفاع رو 100٪ المان مادرش قرار می‌ده
w-full: عرض رو 100٪ المان مادرش قرار می‌ده
این دو تا باعث میشن که نسبط عرض و ارتفاع عکس بهم ریخته بشه و عکس یا خیلی از هر دو طرف کشیده بشه برای رفع این مشکل پوزیشن عکس رو باید کاور کنیم
object-cover: عکس رو کاور میکنه
object-center: عکس از وسط نشون می‌ده که اگه عرض تغیر کرد از چپ و راست بریده بشه و شکل کلی عکس حفظ بشه.

یه مرور کلی:

تمام استایل‌هایی که در درس قبلی یاد گرفتیم رو می‌تونیم در حالت رسپانسیو هم استفاده کنیم و مقادیر رو تغیر بدیم. به عنوان مثال h1 که در درس قبلی بهش فوت سایز و فونت استایل دادیم توی دستگاه‌های عریض کوچک به نظر می‌رسه پس می‌تونیم بهش استایل بدیم:

فایل تمرینی رو از اینجا بگیرید و کامل ببینیدش. خب توی درس بعدی با نحوه‌ی تغییر hover - focus - active و ... دادن به المان‌ها آشنا می‌شیم که در Tailwind به مراتب خیلی سریع‌تر و راحت‌تر می‌تونیم این کار رو بکنیم.

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