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

کلمات کليدي :

تبدیل قالب به Responsive،تبدیل وب سایت به ریسپانسیو
شاید این مطلب برای دیگران نیز مفید باشد پس با یک کلیک رو تصاویر زیر آن را به اشتراک بگذارید کانال سئو

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

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

 

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

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

 

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

 

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

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

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

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

 

برای نمایش وب سایت در تبلا فایا .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%;
}

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

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

مرحله آخر بسیار تبدیل وب سایت از حالت معمولی به 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%; } 

 

 

ارسال نظر



نظرات


آرشيو

ارتقاء رتبه وب سایت