طراحی سایت واکنش گرا

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

طراحی responsive یا واکنش گرا به طور کلی تطبیق صفحه سایت با هر نمایشگری است از آیفون تا آی پد و مانتیور های عریض , اصول طراحی سایت واکنش گرا را با جزئیات کامل تر بررسی می کنیم.

عنصر کلیدی انعطاف پذیری در طراحی قالب واکنش گرا عرض طرح است حداقل عرض باکس ها و محتوای آن ها باید در نمایشگرهای متفاوت, متفاوت باشد.

خب اولین مورد یک سند html5 است و پس از آن دو آدرس جاوا اسکریپت داریم آدرس نخست برای مرورگر IE9 است تا تگ های HTML5  را شناسایی کند و ادرس دوم برای نمایش سایت در مرورگر IE6-8 است.

اما ساختار پایه  CSS

#pagewrap {
	width: 980px;
	margin: 0 auto;
}
#header {
	height: 160px;
}
#content {
	width: 600px;
	float: left;
}
#sidebar {
	width: 280px;
	float: right;
}
#footer {
	clear: both;
}

تمام عناصر HTML5 باید بلاکی باشند.

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	    display: block;
	}

برای تعریف عرض در CSS  از max-width استفاده می کنیم تا حداکثر عرض موردنظر را برای نمایشگر تعیین کنیم.حالا نوبت CSS3 است که با Media Queries برای صفحه نمایشگرهای متفاوت عرض و ساختار متفاوت تعیین کنیم.

رزولوشن کمتر از 980px

@media screen and (max-width: 980px) {
	#pagewrap {
		width: 95%;
	}
	#content {
		width: 60%;
		padding: 3% 4%;
	}
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}
}

رزولوشن کمتر از 650px

@media screen and (max-width: 650px) {
	#header {
		height: auto;
	}
	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}
	#main-nav {
		position: static;
	}
	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}
	#site-description {
		margin: 0 0 15px;
		position: static;
	}
	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}
	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}
}

رزولوشن کمتر از 480px

@media screen and (max-width: 480px) {
	html {
		-webkit-text-size-adjust: none;
	}
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}
}

برای تصاویر و ویدوهای واکنش گرا:

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

پیش نمایش قالب را در اینجا ببینید و عرض صفحه سایت را تغییر دهید تا متوجه واکنش گرایی آن شوید.

طراحی سایت واکنش گرا