جلسه ۷۲ – واکنش گرایی و ابعاد عناصر

تو این مقاله، خلاصه ای از مفهوم viewport رو مرور می‌کنیم، و به این موضوع می‌پردازیم که چه خاصیت ها و واحد هایی در طراحی واکنش گرا، به خصوص در چیدمان عکس‌ها و ویدیو ها بهمون کمک می‌کنن؟

مفهوم viewport در CSS

می‌تونیم تعریف این مفهوم رو به شکل زیر خلاصه کنیم:

viewport، به محدوده ای اطلاق می‌شه که ما وب سایت رو در اون مشاهده می‌کنیم. در رابطه با آشنایی با Viewport یک مقاله کامل در مجموعه مقالات آموزش جامع HTML داریم که می‌توانید آن را مطالعه کنید.

viewport، تنها شامل محتوای وب سایت میشه و مواردی مثل اسکرول بار رو در بر نمی‌گیره.

مرورگر های موبایل و تبلت، به صورت پیش فرض، ابعاد وب سایت ها رو (با همون چهره ای که تو دسکتاپ دارن) برای جا گرفتن تو viewport خودشون کوچیک می‌کنن.

با این کار ما می‌تونیم از وب سایت استفاده کنیم، ولی با کلی زوم و بدبختی و سختی! بنابراین باید قبل از هر چیزی، به مرورگر بگیم: صبر کن، کاری به سایت نداشته باش،‌ خودم میخوام واکنش گراش کنم!

برای این فهموندن این موضوع به مرورگر، کافیه کد زیر رو به بدنه عنصر head اضافه کنیم:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این کد، یک متاتگ به حساب میاد که می‌تونین در موردشون، تو آموزش HTML بیشتر مطالعه کنین.

ابعاد متغیر

اندازه ها در حالت واکنش گرا، باید بر حسب واحد های تغییر پذیر بیان بشن.

برای مثال، واحد هایی مثل درصد، vw و vh تغییر پذیر،‌ و واحد هایی مثل px و pt تغییر ناپذیر هستن.

این واحد ها، متناسب با ابعاد viewport خودشون رو تطبیق می‌دن. برای مثال 20vw، یعنی ۲۰درصد عرض viewport.

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

برای درک بهتر این واحد ها، به مثال زیر توجه کنین:

dark

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

برای آشنایی بیشتر با واحد های متغیر و مستقل، می‌تونین به مقاله واحد ها در CSS‌ مراجعه کنین.

عکس ها در طراحی واکنش گرا

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

بنابراین نباید اجازه بدیم که تغییر اندازه صفحه وب سایت، تاثیر منفی ای روی عکس ها بزاره.

برای واکنش گرا کردن عکس ها، باید به نکات زیر توجه کنیم.

استفاده مناسب از خاصیت width

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

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

به عکس مثال زیر توجه کنین، عکس مورد نظر عنصر فرزند body هست و بر اساس تغییرات ابعاد body بزرگ و کوچیک می‌شه:

dark

استفاده از دستور max-width:100%

تفاوت استفاده از خاصیت max-width به جای width، در اینه که عکس،‌ هیچوقت از ابعادی که براش تعریف شده بزرگ تر نمیشه. (حتی اگه وب سایتمونو تو صفحه نمایش بزرگ تری بررسی کنیم)

ما از این دستور، زمانی استفاده می‌کنیم که نمی‌خوایم عکس، از ابعاد پیش فرض خودش بزرگ تر ظاهر شه:

img{
   max-width: 100%;
}

استفاده از عکس ها به عنوان پیش زمینه

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

خاصیت background-size نقش مهمی تو واکنش گرا بودن تصاویر پیش زمینه ما داره. همونطور که می‌دونیم، این خاصیت مقادیر زیر رو قبول می‌کنه:

• contain: در این حالت، تصویر پیش زمینه، نسبت عرض به طول خودش رو حفظ می‌کنه و سعی می‌کنه با تکرار شدن در راستا های مختلف، حجم فضای مورد نظر رو پر کنه.

• cover: این مقدار، بدون تکرار کردن تصویر پیش زمینه، تمامی حجم مورد نظر رو پر می‌کنه. برای این منظور بعضی از قسمت های تصویر رو برش می‌ده.

• 100% 100%: این مقدار، تصویر مورد نظر رو در راستای عمودی و افقی گسترش می‌ده، تا جایی که کل حجم مورد نظر رو پر کنه.

استفاده از عکس های مختلف

گاهی اوقات، عکس های مورد نظرمون چندان باب میل ما رفتار نمی‌کنن.

برای مثال، ممکنه یک عکس تو ابعاد دسکتاپ خوب باشه، اما تو ابعاد کوچیک تر کیفیت خودش رو از دست بده، یا بریده شدنش مفهوم و محتوای اون رو از بین ببره.

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

به مثال آموزش طراحی وب سایت زیر از سایت w3schools.com توجه کنین:

dark

همچنین می‌تونیم از ترکیب عنصر picture و مدیا کوئری خارجی برای این منظور استفاده کنیم.

کافیه با کمک یکی دیگه از مثال های w3schools.com بنویسیم:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 800px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

تو کد بالا، در صورت صحیح بودن شرط مدیا کوئری، عنصر حاوی مدیا کوئری جای عنصر دیگه رو می‌گیره.

همچنین، از عنصر img برای مرورگر هایی استفاده شده که از عنصر picture پشتیبانی نمی‌کنن.

اگه جایی از مطالب رو مشکل داشتین، حتما تو قسمت نظرات بیان کنین. من یا دیگر اعضای تیم میزفا کمکتون می‌کنیم 🙂

ویدیو ها در طراحی واکنش گرا

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

استفاده مناسب از خاصیت width

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

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

استفاده از دستور max-width:100%

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

پایان ترم

سوال:

به عکس زیر توجه کنین:

36873

با کمک مطالبی که تو این مقاله یاد گرفتین، کدی بنویسین که:

• تو حالت تبلت، عکس ۹۰ درصد عرض صفحه رو اشغال کنه.
• تو حالت گوشی، عکس ۶۰ درصد عرض صفحه رو اشغال کنه.

نکته: ابعاد صفحه به خودتون بستگی داره. سعی کنین ابعاد منطقی ای برای گوشی و تبلت انتخاب کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

یاد گرفتیم که تو بحث واکنش گرایی، می‌تونیم استفاده بسیار مفیدی از واحد های متغیر و همچنین،‌ خاصیت هایی مثل max-width‌ و max-height داشته باشیم.

و خب، این مقاله هم تموم شد!

تو مقاله آینده، با هم یاد می‌گیریم که چطور از روش های طبقه بندی مختلف محتوا، برای واکنش گرایی استفاده کنیم. پس با ما همراه باشین 🙂

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

مدیر محتوا: علی اسمعیلی