Предыдущий ролик Следующий ролик  

Видео урок: Определение изменения в размере экрана

Создание отзывчивого веб-дизайна

Теперь, когда мы можем определить размер браузера при помощи JavaScript, мы запустим эту функцию проверки браузера на повторяющейся основе, чтобы постоянно проверять размер и состояние экрана. А также нужно убедиться, что мы постоянно не перезагружаем область контента, пока не поменялся размер окна браузера. Чтобы сделать это, давайте вернемся к файлу design.js. Внутри функции проверки браузера, после того как мы определили тег h1, чтобы мы знали, какие значения установлены для наших переменных, давайте добавим несколько Return. Добавим сюда другой оператор условия. Начинаем с написания if, круглые и фигурные скобки, фигурные скобки открыты.

Внутри круглых скобок мы определяем, равен ли размер окна новому размеру окна, так что давайте перейдем сюда и скопируем имя переменной. Итак, windowSize не равна newWindowSize. Давайте зайдем сюда. Сейчас мы установим переменную windowSize здесь снова, она находится в верху документа. Это первая переменная, которую мы определили. Мы устанавливаем windowSize равной newWindowSize, затем точка с запятой.

Далее здесь мы запускаем функцию loadHero. А затем к оператору условия мы добавляем выражение else. И внутри этого выражения else мы зададим условие, чтобы узнать, что размер окна не изменился. Это означает, что loadHero не загружается. Давайте вернемся к тегу h1. Пишем знак доллара, круглые скобки, одинарные кавычки для строкового литерала. Пишем за ними h1, пишем .append, круглые скобки, точка с запятой. Таким образом будет добавлен дополнительный контент в H1, после того как будет добавлен весь этот контент.

Внутри append нажимаем пробел, два дефиса, а затем просто вставляем no change. Когда все на месте, нам нужно запустить функцию проверки браузера в повторяющемся порядке, так что давайте зайдем в область document.ready. Во-первых, заходим сюда и комментируем loadHero. Мы будем запускать loadHero только тогда, когда размер экрана меняется между маленьким, средним и большим. Затем после функции проверки размера браузера нажимаем Return. Вводим setInterval. Добавляем круглые скобки и точку с запятой. setInterval запускает конкретную функцию в определенное время, поэтому идем сюда и копируем имя функции для проверки размера браузера.

Внутри круглых скобок для интервала две одинарные кавычки и литерал, давайте добавим имя функции и закроем скобки. За строковым литералом, но внутри круглых скобок для интервала пишем запятую. Сюда вставляем 1000 миллисекунд. Итак, каждую секунду будет запускаться функция проверки размера браузера. То есть эта функция будет постоянно запускаться на нашей странице. Нажимаем Save. Давайте перейдем в браузер. Идем сюда, нажимаем Reload, и теперь функция проверки браузера будет запускаться каждую секунду. Если я начну уменьшать размер окна браузера, вы увидите, что каждую секунду будут меняться все эти числа.

И в дополнение к тому, что меняются числа, мы можем увидеть представление того, чем является размер экрана. Итак, мы видим 455 пикселей и маленький экран. Идем дальше, 392 пикселя и до сих пор маленький экран. Мы видим, что флаг не меняется, и поэтому мы знаем, что это конкретное изменение не влияет на функцию loadHero, потому что между маленьким и средним экраном не было изменения. Иду сюда, открываю. И кстати, это число в круглых скобках, актуальный размер контента, это размер, который касается среднего размера экрана, так что если мы на него посмотрим, то увидим 500 пикселей.

То есть, мы просто переходим к среднему размеру экрана. Через одну секунду мы не увидим флаг изменения, а затем через секунду функция проверки браузера запустится снова, что проверить, было ли внесено изменение, и потом будет добавлен флаг no change. На данный момент мы способны определить, когда браузер переходит от большого экрана к среднему или маленькому. Также мы можем определить отдельные изменения. Теперь мы готовы загружать разный контент в область hero, в зависимости от размера окна браузера.