چگونه یک تصویر خلق شده توسط سی اس اس را واکنش گرا کنیم



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

امروز اومدم طبق سنت دیرینه اطلاعتم رو به اشتراک بزارم اما نه به روشی سنتی که انجام میدادم بلکه بیام اونها رو یک جا ثبت کنم و خیلی بهتر مدیریت کنم که با ویرگول آشنا شدم و ممنونم از دوستان که من رو آشنا کردن با این وب سایت عالی ♥

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

برای اینکه ما بتونیم یک تصویر رو واکنش گرا کنیم به یک سری چیزها نیاز داریم که حتما حتما باید بهشون به درک رسیده باشیم

پیش نیاز : شما باید با واحدهای em و rem آشنایی کامل رو داشته باشید تا بفهمید که من چی میگم

دید تصویری

اولین قدم برای اینکه ما بتونیم داخل سی اس اس طراحی یا نقاشی کنیم این هست که دیدمون رو از حالت وب بیاریم بیرون

اینجا دیگه محیط وب نیست مکانی برای نقاشی کردن هست پس شما باید دیدتون رو به شکل یک تصویر کنید

یعنی چی دید تصویری؟

دید تصویری یعنی اینکه به المان هاتون توی صفحه شبیه به یک تگ نگاه نکنید بلکه یک تصویر نگاه کنید خب اینها چه مزیت هایی داره؟

1- شاید با خوندن تیتر وقتی که میگم واکنش گرا ذهنتون بره سمت واکنش کردن صفحه وب و تغییر المان ها ، به همین دلیل هست که میگم ذهنتون رو از این مطالب خارج کنید و یک دید تصویری داشته باشید


خب یک تصویر چگونه واکنش گرا میشه؟

یک تصویر در حالت طبیعی وقتی تصمیم بر این گرفته میشه که واکنش نشون بده نسبت یا همون Aspect طول به عرض تصویر تغییر میکنه

خب به این ویدیو نگاه کنید تا بفهمید منظور من چی هست

https://www.aparat.com/v/RWFr1

پس یک تصویر زمانی که واکنش نشون میده به والد یا مرورگر به این شکل تغییر میکنه یعنی هر چقدر طول کمتر یا بیشتر شد نسبت به همون هم عرض کوچیک و بزرگ میشه یا بر عکس هر چقدر عرض کوچک و یا بزرگتر شد طول هم نسبت به همون تغییر میکنه پس این کلمه نسبت رو یادتون باشه

این یعنی اینکه تمام المان های ما توی صفحه باید به همین شکل واکنش نشون بدن


چگونه در سی اس اس واکنش گرا (responsive ) طراحی کنیم

قدم اول ساختن یک بوم نقاشی وب

بوم نقاشی با ابعاد متفا
بوم نقاشی با ابعاد متفا


همونطور که در اول مطلب بهتون گفتم که دید رو باید شبیه به یک تصویر کنید ، اینجا هست که میفهمید چرا

وقتی من در حال طراحی کردن هستم پس محیط من برای نقاشی کشیدن دیگه شبیه به یک صفحه وب نیست اینجا دیگه دفتر نقاشی هست یا یک بوم نقاشی نه یک صفحه وب

پس در قدم اول یک نقاش برای ترسیم تصویر خودش به یک بوم نقاشی با یک ابعاد مورد نظرش داره

خب میایم یک DIV میسازیم و به اون یک ابعاد مورد نظرمون رو میدیم



حالا ما مکان طراحی خودمون رو ساختیم و میتونیم داخلش شروع به کشیدن طراحی خودمون بکنیم


قدم دوم محیط تحت تاثیر position: absolute

قدم بعدی برای طراحی این هست که ما باید تمام المان هامون رو درون بوم نقاشی آزادانه رها کنیم ، ما اینجا دیگه نیازی به اسکلت بندی یا رعایت قوانین flow درون بوم نقاشیمون نیستیم ؛ همونطور که گفتم دیدتون باید تصویری باشه نه شبیه به وب

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

من هم میگم راه داره که در بخش بعدی حتما بهتون میگم


قدم سوم واکنش پذیر کردن المان های درون بوم نقاشی

کار اصلی ما یا هدف اصلی این مطلب اینجا شروع میشه که چطور ما محیط نقاشیمون رو کاری کنیم که نسبت به محیط مرورگر واکنش نشون بده یعنی اگه من مرورگر رو کوچیک بزرگ کردم تصویر من هم تغییر کنه یا اصلا نه دلم خواست یکم کوچیک ترش کنم چطور این همه المانی رو که همش هم تحت تاثیر position:absolute هست رو واکنش پذیر کنم

کلید حل این مشکل در دستان واحد های em و rem هست

کسانی که با این واحد کار کرده باشن میدونن که این واحد یک واحد نسبی هست یعنی نسبت به والد یا ریشه صفحه میتونه تغییر کنه پس یعنی اگه من بیام به بوم نقاشی بگم واحد فونت سایز تو بر اساس % یا vw هست پس کل المان ها تت تاثیر همین واحد واکنش نشون میدن ( چقدر جالب و عجیب )

پس این کاری رو که میگم رو باید انجام بدید

هر مقدار عددی که درون این بوم نقاشی یا خود بوم نقاشی هست باید بر اساس واحد em نوشته بشه ( نکته بسیار مهم ) از width - height گرفته تا box-shadow - border-radius و .... هر چیزی که مقدار عددی داره مهم نیست باید همشون بر اساس em نوشته بشن

قدم چهارم قرار دادن پراپرتی font-size درون بلوک بوم نقاشی

خب ما اومدیم کل مقدارها رو بر اساس واحد em نوشتیم حالا چطور باید واکنش نشون بدن

شما باید از پراپرتی فونت سایز درون والد یا همون بوم نقاشی استفاده کنید



قدم پنجم معنادار کردن ( semantic ) طراحی کشیده شده توسط سی اس اس

من همیشه عاشق معنادار کردن و استفاده صحیح از تگ ها هستم پس حتی نقاشی من هم باید از این قائده مستثنی نباشه ، برای اینکه بتونم یک تصویر رو که هیچ المانیش ربطی به تصویر نداره معنادار کنم باید از صفت role= img درون تگ والد یا همون بوم نقاشیم استفاده کنم تا بتونم به ربات بفهمونم که اینها همش یک تصویر هست نه اون چیزی که تو فکر میکنی

پس فهمیدیم که چقدر وجود بوم نقاشی مهم هست

خب خلاصه کل مطلب

1- دید باید شبیه به تصویر باشه نه المان های وب

2- ترسیم محیط نقاشی ( بوم نقاشی )

3- استفاده از واحد em

4- استفاده از font-size با واحد مورد نظر خودمون ( % - vw - vmin - vmax و... )

5- معنا دار کردن بوم نقاشی با role = img

بریم با هم یک طرح ساده رو ببینیم که کل این قواعد درونش اجرا شده

لینک پروژه