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

آموزش کامل ریسپانسیو کردن قالب

2 دقیقه خوانده شده
۰
0
126
huk

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

Responsive Design  طراحی واکنش گرا یا طراحی وب سایت به صورت پاسخگو یکی از فاکتورهای سئو می باشد وب سایت های که دارای نمای ریسپانسیو نباشند مطمئنا ضرر خواهند کرد چرا که پیشرفت روز به روز باعث که فاکتور ریسپانسیو یکی از فاکتورهای مهم سئو باشد .

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

با استفاده از لینک بالا میتوانید مشاهده کنید آیا وب سایت شما تحت موبایل ،تبلت و … می باشد .

 

اگر بعد از تست مشاهده کرده که وب سایت ظاهر خوبی در تبلت وگوشی ندارد باید مراحل زیر را انجام دهید 

 

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

۱-اولین مرحله برای تبدیل وب سایت به ریسپانسیو LAYOUT یا قالب وب سایت را باید به حالت ریسپانسیو تبدیل کنید  


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

 

برای نمایش وب سایت در تبلا فایا .css خود را باز و کد زیر را در آن قرار دهید

۲- در مرحله دوم باید کاری کنید که با کوچک شدن صفجه نمایش تصاویر نیز کوچک شوند برای این امر کافی فایل css خود را یکبار دیگه باز کنید و کد زیر رو درآن قرار دهید .

در بعضی از مواقع نیاز می باشد کنترل بیشتری روی تصاویر داشته باشیم برای این کار میتوانی کد زیر رو در css قرار دهیم


و به صورت زیر از کد بالا استفاده کنید

مرحله آخر بسیار تبدیل وب سایت از حالت معمولی به responsive  بسیار  مهم می باشد باید فونت های برنامه های استفاده شدم رو به ریسپانسیو تبدیل کنم 

کد زیر رو در داخل فایل css خود قرار دهید


بارگذاری نوشته های مرتبط بیشتر
مطالب بیشتر از این نویسنده محمدهادی محمدجانی
بارگذاری بیشتر در آموزش ها

پاسخ دهید

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

بررسی کنید

ویدیو آموزش ساخت شماره مجازی برای تمامی شبکه های اجتماعی – تلگرام

دوستان امروز براتون یه آموزش ویدئویی آماده کردم برای ساخت شماره مجازی برای تمامی شبکه های …