تبدیل وب سایت به ریسپانسیو

تبدیل قالب به Responsive،تبدیل وب سایت به ریسپانسیو

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

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

 

تست ریسپانسیو بودن وب سایت

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

 

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

 

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

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


 

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

 

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

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

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

img { max-width: 100%; }

 

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

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

بعد از تصاویر باید فایل های ویدئویی را نیز ریسپانسیو کنم برای این کار کافی کد زیر رو در داخل css خود قرار دهید

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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


 
 

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

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

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 
html { font-size:100%; } 

 

 

مطالعه بیشتر

طراحی سایت خبری

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

رفع خطای 404

رفع خطای 404 ، حذف ارور 404 . در این پست آموزشی برای راه حل هایی در حورد رفع خطای 404 بیان شده است برای اطلاعات

انتخاب کلمه کلیدی

انتخاب کلمات کلیدی در سئو سایت و همچنین در سئو سایت بسیار مهم می باشند چرا که در صورتی که به درستی انتخاب شوند

سئو سایت