DESIGNR

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

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

خوب این سایز های کامپیوتر های رومیزی یا همون desktop هستن ک شما حتما لازم نیست تمام این سایز ها رو پیاده سازی کنین ( بسی وقت گیره ) 😀

تو این اموزش ما از سایز ۱۴۴۰ استفاده میکنیم که اول برای سایت ۱۰۲۴ ریسپانسیو میکنیم بعد هم ۷۶۸ و اخریشم ۴۸۰ که میشه برای کامپیوتر های رومیزی و تبلت و موبایل . شما بعد از یادگرفتن قانون های ساده ریپسانسیو میتونین سایز هایی ک دوست داشتین رو برای سایت یا قالب خاصی که مد نظرتون هست پیاده سازی کنین .

 

عکس قالب در سایز ۱۰۲۴ پیکسل :

عکس قالب در سایز ۴۶۸ پیکسل :

و در نهایت سایز ۴۸۰ پیکسل :

 

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

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

کدهای html قالب :

کد های سی اس اس کامل و دارای کدهای ریسپانسیو :

خوب میبینیم ک این قالب در ۳ سایز مختلط ۱۰۲۴ و ۴۶۸ و ۴۸۰ پیکسل ریسپانسیو شدن. دمو و فیلم اموزشی رو حتما ببینین ک کامل متوجه اموزش بشید اگر که مشکلی هم داشتین میتونین مطرح کنین.

 

موفق باشید.