Азы резиновой верстки

rezinovaya verstka maket - Азы резиновой верстки

Столкнулся с небольшой проблемкой, когда увидел один из своих сайтов на экране 1024х768, который не влез в размеры экрана и отображался с горизонтальной прокруткой. Честно говоря, я даже и не пытался учесть, что такие экраны еще в ходу.

Данный сайт тоже будет кривым на 1024 и ниже т.к. у него фиксированная ширина в 1080 пикселей и я его не буду оптимизировать под «вымирающие» технологии в виде квадрата 1024 ибо нужно в корне менять структуру. Мобильные платформы я учел — имеется отдельная версия и это полностью все меняет.

Но вот коммерческие проекты просто обязаны охватывать всю аудиторию с пк от 1024, до 1920 и не забыть про мобильную, а там экраны вообще мелкие.

Для проверки отображения сайта на разных разрешениях экранов есть онлайн сервис Screenfly, который показывает сайт на разных экранах. Есть список из стандартов, но можно задать любое разрешение.

Ладно, верстаем резину, что на скриншоте выше с двумя правыми сайдбарами, которая будет сжиматься до 1024 (т.е. не будет горизонтальной прокрутки) и растягиваться до 1200px. При этом нужно не забыть об адаптивности картинок ибо шапка шириной в 1200px просто так не сожмется до 1024 и будет \»выпирать\».

HTML

<div class="main">
	<div class="logo">
		<a href="/"><img src="images/logo.png" alt=""></a>
	</div>

	<div class="content">

		<div class="c_text">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		
		<div class="c_mid">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
		</div>

		<div class="c_rgt">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
		</div>

	</div>

	<div class="footer"></div>
</div>

CSS

.main{
	width: 100%; 
	min-width: 1000px; 
	max-width: 1200px;
	margin: 0 auto;
}

Мы задаем фиксированные минимум и максимум. Например, сайт 950 или 1220px стать не сможет, а ширину оставляем в 100 процентов. Не забываем и про скроллер справа, который так же забирает часть пикселей. В моем случае на него ушло около 15-20px, в общем — округлил).

Теперь считаем наши блоки с контентом и шапку:

.logo{
	width: 100%;
	float: left;
}

	.logo img{
		width: 100%;
		float: left;
	}

Небольшой трюк преобразования фиксированной и к тому же фактической ширины картинки в резиновую. Все что нужно, это задать ширину в 100%

.content{
	float: left;
	width: 100%;
}

	.c_text, .c_mid, .c_rgt{
		float: left;
		margin: 0;
		padding: 0;
	}	

	.c_text{width: 60%;}
	.c_mid{width: 20%;}
	.c_rgt{width: 20%;}

Мы разбили наш контент на три блока и всем задали процентную ширину. Все. не забывайте про отступы padding и margin — любой отступ по ширине автоматически увеличивает размер блока и он соскакивает вниз.

Читайте также

Похожие записи

Скрипт идущего времени на jQuery
Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу. Пример:...
Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *