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

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 – любой отступ по ширине автоматически увеличивает размер блока и он соскакивает вниз.

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

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