# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > آموزش: طراحی وب سایت با استفاده از تکنیک responsive

## soroush.r70

عامیانه عرض کنم

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

در طراحی ریسپانسیو می تونید از فریم ورک های مختلفی که وجود داره استفاده کنید که من در این تاپیک طریقه استفاده از lessframework رو بهتون می گم فریم ورک های دیگری مثل  yaml و SimpleGrid و amazium و cssgrid و .... هم وجود داره

اولین قسمت کد فریم ورک رو در داخل یک فایل html ذخیره کنید


```
<!doctype html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title></title>
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
	</head>
	
	<body lang="en">
		
	</body>
	
</html>
```

توضیح در مورد تکه کد بالا بده اصلی سایت که دارای یک فایل پیوست به نام html5.js که باعث عمل کردن تگ های html5 در مرورگرهایی که از html5 پشتیبانی نمی کنند می شود.
تگ link rel هم کد سی اس اس خودتون رو داخلش قرار بدید و آدرسش رو در این تگ قرار می دید.
تگ "meta name="viewport هم برای اینکه مرورگر بفهمونه که عرض وب سایت رو با عرض نمایشگر پلتفرم ها یکی کن. توضیحات بیشتر در مورد این تگ در این لینک



دوم این کدها رو داخل یک فایل css ذخیره کنید

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}



/*	Typography presets
	------------------	*/

.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
}

.large, h2 {
	font-size: 42px;
	line-height: 48px;
}

.bigger, h3 {
	font-size: 26px;
	line-height: 36px;
}

.big, h4 {
	font-size: 22px;
	line-height: 30px;
}

body {
	font: 16px/24px Georgia, serif;
}

.small, small {
	font-size: 13px;
	line-height: 18px;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 896px;
	padding: 72px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 712px;
		padding: 48px 28px 60px;
	}
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
		width: 252px;
		padding: 48px 34px 60px;
	}
	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 436px;
		padding: 36px 22px 48px;
	}
	
}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}

 کد css بالا از چند قسمت تشکیل شده است

قسمت پیشفرض سایت که در body دارای عرض 922px می باشد که شما سایتتنون رو به طور پیشفرض در این محیط طراحی می کنید



```
/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 922px;
	padding: 32px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	margin:0 auto;
	margin-top:10px;
}
```

قسمت بعدی برای طراحی قالب در تبلت ها



```
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 712px;
		padding: 48px 28px 60px;
	}
	#image{
		width:700px;	
	}
}
```

قسمت بعدی برای موبایل ها 320px


```
@media only screen and (max-width: 767px) {
	
	body {
		width: 252px;
		padding: 48px 34px 60px;
	}

}
```

قسمت بعدی برای موبایل های 480px



```
/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 436px;
		padding: 36px 22px 48px;
	}

}
```

و قسمت آخر برای نماشگر های رتینا و آیفون می باشد که بسته به نیازتون در این قسمت طراحی می کنید



```
/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
	
}
```

خوب شما الان بدنه اصلی lessframework رو که از سایت lessframework.com گرفته بودم رو نصب کردید

یه مثال کوچیک از طراحی ریسپانسیو می زنم متوجه می شید

من میام در قسمت body سایت با تگ h1 یک عنوان می زنم و می رم در محیط پیشفرض css خودم تگ h1 رو به صورت زیر اندزه می دم 

h1{
	font-size:30px;
}	


خوب در محیط پیشفرض این به صورت عادی نماش داده می شه حالا می خوام وقتی محیط مرورگرم رو کوچیک تر کردم  فونت تگ h1 هم کوچیک تر بشه برای اینکار می رم در قسمت های دیگه همین کدی که در بالا اومده رو در محیط های دیگه css خودم  با فونت کوچیک تر می نویسم 

شکل اصلی می شه این :
html


```
<h1>وب سایت ریسپانسیو  </h1>
```

css

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 896px;
	padding: 72px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}


h1{
	font-size:30px;
}	
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 712px;
		padding: 48px 28px 60px;
	}
	
	h1{
	font-size:20px;
}	

	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
		width: 252px;
		padding: 48px 34px 60px;
	}
	
	
	h1{
	font-size:15px;
}	

	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 436px;
		padding: 36px 22px 48px;
	}
	
	h1{
	font-size:20px;
}	

	
}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
	h1{
	font-size:10px;
}	

	
}

خوب شما الان محیط مروگر از بغل کوچیکتر کنید می بینید که متن هم به همرا اون کوچیک می شه

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

نکته : قالب اصلی lessframework که در ابتدا قرار دادم بهم نریزید.

فایلی رو پیوست می کنم که یه قالب ساده طراحی کردم تا شیوه ی کار بیشتر دستتون بیاد

----------


## aspismylove

مرسی دوست عزیز که وقت میزاری برای آموزش و...  :قلب:  :تشویق: 

نکته : منوها زیر عکس رفته ، یا به منوها Z-Index بده ، یا به عکس Margin-Top بده ...

باز هم خسته نباشید

----------


## رضا قربانی

مثل همیشه عالی  :چشمک:

----------


## mahdi.iqu

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

----------


## mahdivita

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

----------


## soroush.r70

> میشه یکم باز تر توضیح بدید؟
> الان من عرض رو زدم 998 خیلی چیزا هم توصفحم دارم مثلا اسلاید شو،تب ساز،موقعیت چپ منوی بالا منوی پایین و...
> چطوری اینا رو با هم هماهنگ کنم؟


یه نمونه گذاشتم دانلود کن متوجه می شی

هر بخشو باید در قسمت مربوطش تغییر سایز بدی

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

----------


## Raymvnd

درود...اگه میشه یه آموزش ویدئویی بساز یا بیشتر آشنا بشیم...
چون این آموزش متنی گذاشتی اصلا سر در نمی دارم....
ممنون میشم آموزش ویدئویی بزارید... :لبخند:

----------

