آذر, ۱۳۹۶ بدون نظر آموزش وبمستر
تبدیل وب سایت به ریسپانسیو

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

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

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

۱-اولین مرحله برای تبدیل وب سایت به ریسپانسیو 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; }
}

۲- در مرحله دوم باید کاری کنید که با کوچک شدن صفجه نمایش تصاویر نیز کوچک شوند برای این امر کافی فایل 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%; }

ارسال نظر شما

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