Сайт визитка - адаптируем для мобильных телефонов

Контрольной точкой будет разрешение 750px. При данной ширине экрана исчезнет блок с анонсами новостей в левой колонке, а блок с номерами телефонов вытянется во всю ширину. Так же перестанут отображаться и картинки в центральной колонке.

@media (max-width : 750px) {
	.home_header {
		padding-bottom: 153px;
	}
	.slider_wrap {
		margin-top: -153px;
	}
	.center_colum {
		margin:0 2%;
		width:96%;
	}
	.center_colum p img {
		display:none;
	}
	.center_colum .map p img {
		display:block;
	}
	.left_colum {
		margin:0 2% 20px;
		padding:0;
		width:96%;
	}
	.modules p, .modules h3 {
		margin:0 20px 0 0;
		float:left;
		line-height:23px;
	}
	p.velcom {
		border:0;
	}
	.news_mod {
		display:none;
	}
}

Очередное разрешение, при котором потребуется наше вмешательство - 640px. Тут потребуется скорректировать отображение блока с картинкой на главной странице.

@media (max-width : 640px) {
	.home_header {
		padding-bottom:125px;
	}
	.slider_wrap {
		margin-top:-125px;
	}
	.slider_pic {
		width:90%;
	}
}

При разрешении в 570px сделаем перенос номеров телефонов и отобразим их друг под другом.

@media (max-width : 570px) {
	.left_colum p.velcom {
		margin:10px 0 0 157px;
	}
}

Фактически сайт принял окончательный вариант - далее потребуется лишь небольшая коррекция отдельных блоков. Уменьшая окно браузера (удобнее всего это делать в хроме), можно без труда вычислить, при каких разрешениях и для каких элементов понадобится подправить стили.

@media (max-width : 480px) {
	.center_colum .map p img {
		width:100%;
	}
}

@media (max-width : 450px) {
	.slider_pic {
		width:88%;
	}
}

@media (max-width : 390px) {
	.modules p, .modules h3 {
		float:none;
	}
	.left_colum p {
		margin:10px 0 0;
	}
	.left_colum p.velcom {
		margin-left:0;
	}
}

@media (max-width : 350px) {
	h1 {
		line-height:26px;
	}
	.home_header {
		padding-bottom:85px;
	}
	.slider_wrap {
		margin-top:-85px;
	}
	.header_wrap a.logo, .header_wrap a.logo img {
		width:100%;
	}
	.slider_pic {
		width:84%;
	}
}

Вот, собственно, и все - верстка закончена. Все страницы отлично отображаются при любых разрешениях. Финальную версию скачиваем по ссылке ниже. Там же расположена ссылка на демо вариант того, что мы сделали в этом цикле статей.