DESIGNR
خانه » اموزش » اچ تی ام ال » اموزش ریسپانسیو کردن قالب

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

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

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

تو این اموزش ما از سایز 1440 استفاده میکنیم که اول برای سایت 1024 ریسپانسیو میکنیم بعد هم 768 و اخریشم 480 که میشه برای کامپیوتر های رومیزی و تبلت و موبایل . شما بعد از یادگرفتن قانون های ساده ریپسانسیو میتونین سایز هایی ک دوست داشتین رو برای سایت یا قالب خاصی که مد نظرتون هست پیاده سازی کنین .

 

عکس قالب در سایز 1024 پیکسل :

عکس قالب در سایز 468 پیکسل :

و در نهایت سایز 480 پیکسل :

 

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

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

کدهای html قالب :

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

خوب میبینیم ک این قالب در 3 سایز مختلط 1024 و 468 و 480 پیکسل ریسپانسیو شدن. دمو و فیلم اموزشی رو حتما ببینین ک کامل متوجه اموزش بشید اگر که مشکلی هم داشتین میتونین مطرح کنین.

 

موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *