Адаптивная верстка с помощью скрипта JavaScript

Адаптивная верстка с помощью скрипта JavaScript
Адаптивная верстка с помощью скрипта JavaScript

С развитием веб технологий вырастает и требования к веб разработке. Больше всего чувствуют на себя веб разработчики, верстальщики или как их сегодня называют frontend — разработчиками.

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

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

Давайте для начала чтоб вам было понятно и так сказать поставить все точки над и рассмотрим какие бывают виды верстки.

Существует 4 вида верстки:

  1. Фиксированная верстка
  2. Резиновая верстка
  3. Адаптивная верстка
  4. Отзывчивая верстка

Рассмотрим все виды по подробнее.

1. Фиксированная верстка

Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

<style>
#temnyi,
#svetlyi {
    width: 440px;
}
</style>

2. Резиновая вёрстка

Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

<style>
#temnyi,
#svetlyi {
    width: 50%;
}
</style>

3. Адаптивная вёрстка

Воплощается с помощью @media или благодаря скриптам. Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати.

<style>
#temnyi, #svetlyi { width: 430px; }

@media (max-width: 1220px) {
  #temnyi, #svetlyi { width: 380px; }
}

@media (max-width: 1120px) {
  #temnyi, #svetlyi { width: 325px; }
}

@media (max-width: 680px) {
  #temnyi, #svetlyi { width: 200px; }
}
</style>

4. Отзывчивая вёрстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству.

<style>
#temnyi, #svetlyi { width: 50%; }

@media (max-width: 1006px) {
  #temnyi, #svetlyi { width: 100%; }
}
</style>

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

Скрипт адаптивной верстки:

<script>
	/*Создадим переменную в которую можно загнать моножесто классов, для удобного использования их в коде.
	Т.е здесь он их обнаруживает один раз и все, а не перед каждой выборкой! это полезная фитча*/
	var my = {
		window : $(window)
		};

	/*Собственно и сама функция*/
	$(window).resize(function () {

		/*Переменная которая определяет ширину окна и загоняет ее в переменную width*/
		var width = my.window.width();

		/*условие трансформации окна т.е услокие которое выоплнился когда ширина окна достигнет определенных размеров*/
		if(my.window.width() < 640)
		{
			$(".right-content").css("float:none; clear:both");
			$(".header-menu").css("float","left");

			if(width < 480)
			{
				/*какое нибудь условие*/

				if(width < 320)
				{
					/*какое нибудь условие*/
				}
			}
		}
		/*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/
		else
		{
			$(".right-content").css("float:left; clear:none");
			$(".header-menu").css("float:none")
		}

	});
</script>

Вот и все. Если возникнуть какие то вопросы пищите в комментариях иди в личку. Не забудьте поделиться в соц.сетях.

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

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.