Адаптивная верстка страницы javascript

Адаптивный jQuery без window.matchMedia

Велосипед с электроприводом вместо рейсового автобуса. Хочу поделиться своим методом адаптации скриптов jQuery (сам привык писать скрипты на jQuery, но разницы нет, все описанное верно и для чистого javascript) параллельно адаптации веб-верстки.

Для адаптации под различные разрешения экранов и различные устройства используют медиа-запросы в CSS. Допустим у нас заложена адаптация нашей верстки под 2 диапазона: от 0 до 479 пикселей и до 800 пикселей.

@media screen and (max-width: 800px) < /* CSS */ >/* И */ @media screen and (max-width: 479px) < /* CSS */ >

Мы хотим использовать различную анимацию и/или запросы к серверу в зависимости от размера экрана. Т.е. нам необходимо параллельно срабатыванию меди-запроса из CSS реагировать в скриптах javascript. Для этого существует, как минимум, 3 способа.

Академический. Специальный метод javascript: window.matchMedia, определяющий срабатывание медиа-запроса, аналогичного CSS:

var mql = window.matchMedia('all and (max-width: 479px)'); if (mql.matches) < // размер окна 479px или меньше >else < // нет, размер окна более 479px >

Минусом данного метода считаю наличие явного указания диапазона разрешения экрана в 2-х местах: CSS и javascript. При изменении диапазона в CSS можно забыть поменять его в javascript, в результате мы получим баг в работе сайта, при определенной ширине окна верстка адаптируется, а соответствующая ей функциональность или анимация еще не подключится. Плюс существует ограничение поддержки данного метода в устаревших версиях браузеров.

Метод костыля №1. Самый простой и, наверное, очевидный метод — добавить в скрипт условие проверки текущего размера окна браузера.

К минусом данного метода относится также наличие дублирования размеров экрана в CSS и в javascript и некоторые проблемы с получением адекватных кроссбраузерных размеров окна на различных платформах.

Метод костыля №2. Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
Html:

.max_width_800 < display: none; >.max_width_479 < display: none; >@media screen and (max-width: 800px) < .max_width_800< display: block; >.max_width_479 < display: none; >> @media screen and (max-width: 479px) < .max_width_800< display: none; >.max_width_479 < display: block; >> 

А в самом скрипте мы просто проверяем показан ли наш маркер:

if ($('.max_width_800').is(':visible')) < // код jQuery >if ($('.max_width_479').is(':visible')) < // код jQuery >

В данном примере мы явно указываем диапазоны размеров экрана только в CSS и при изменении нам не нужно беспокоиться о работоспособности скриптов. Также на кроссбраузерность последнего примера влияет только поддержка браузером медиазапросов.

Идем дальше и подключаем мобильный скрипт только при условии необходимости:

var head = $('head'); includeScripts(head); $(window).resize(function()< includeScripts(head); >); function includeScripts(head) < if ($('.max_width_800').is(':visible')) < head.append('Спасибо за внимание!

Источник

Адаптивная вёрстка через jQuery

В предыдущей статье мы разобрали медиа-запросы в CSS, которые являются ключевыми в адаптивной вёрстке. Но на практике не всегда получается одними стилями адаптировать сайт под небольшую ширину экрана. Поэтому приходится менять не только стили, но и структуру страницы. И в этой статье я покажу, как сделать адаптивную вёрстку через jQuery.

Разберём достаточно классическую задачу. Есть трёхколоночный сайт. И нам необходимо его адаптировать под ширину, например, 480px. Обычными стилями тут никак не обойтись, поэтому необходимо менять структуру. Самый простой способ - это просто всё содержимое правой колонки поставить вниз левой. То есть фактически, превратить трёхколоночный сайт в двухколоночный.

Это тоже пример адаптивной вёрстки, но уже через jQuery. Давайте с Вами это реализуем (не забудьте подключить библиотеку jQuery):

Я думаю, что тут код достаточно прозрачный. Безусловно, без медиа-запросов в CSS тут не обойтись. В частности, у центральной колонки изначально есть margin-left и margin-right. И поскольку теперь правой колонки нет, то margin-right надо обнулить, и, тем самым, центральная часть увеличится, и уместить контент на небольших экранах станет значительно проще.

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

Создано 14.03.2014 12:24:49

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 7 ):

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

Дмитрий,всё в работе. Из-за недостатка времени у Михаила - это не быстро. Естественно,дизайн будет изменён

Здравствуйте, Анатолий. А, где скрипт? Я не вижу. И впервые слышу о скрипте jQuery который делает адаптивную верстку. Скорее всего Вы не так поняли.

Александр, спасибо. С этим разобрался. Теперь у меня такой вопрос. Как правильно написать условие? "Если ширина окна больше, либо равна 320 И меньше, либо равна 768"?

Ещё плохо разбираюсь в JS; как сделать так, чтобы $(document).ready(function().. срабатывала при каждом изменении ширины окна? Я уже разобрался, что надо добавить в атрибут onResize=". ", но как заставить скрипт выполниться ещё раз? Ведь у функции нет имени.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Адаптивная верстка с Restive.JS

Для начала хотел бы вам сказать, что моя специализация — это Backend, но версткой и клиентской частью приходится заниматься постоянно, особенно в своих проектах, которые я делаю в одиночку. Уже давно стало негласным правилом то, что сайт должен быть удобен на всех устройствах, включая всё их разнообразие, особенно в век популяризации мобильного интернета. Благо, CSS3 позволяет это делать при помощи медиа-выражений (media queries). Но есть еще один способ, показавшийся мне более удобным. В зависимости от размера экрана, его ориентации, типа устройства, устанавливать глобальные стили тегу html (можно и другим элементам). А в CSS, отталкиваясь от этих классов, задавать особые стили для разных случаев. Так CSS станет более понятным и мы избавимся от использования медиа-выражений. Для этого нам и понадобится Restive.JS. Так как я человек-практик, да и полное описание лучше читать на сайте плагина, то в статье я ограничусь созданием адаптивной мини-страницы, в процессе которого, надеюсь, станет понятно, для чего всё это необходимо.

Упорно искал статьи про Restive.JS на Хабре, но так и не нашел.

Принцип работы следующий. При смене ориентации или размера окна (а также при загрузке страницы) к выбранному элементу вашей DOM (рекомендуют html или body) добавляются глобальные классы. Это могут быть как стандартные классы, устанавливаемые Restive.JS (is_mobile, is_landscape и др.), так и ваши кастомные, устанавливающиеся при определенных условиях.

Подключение Restive.js

Да, он нуждается в jQuery. Запускается он один раз на странице для выбранного селектора, разработчики советуют использовать html или body как более глобальные, хотя, наверное, могут быть случаи, когда нужно использовать другие элементы.

Вся конфигурация передается в конструктор в виде объекта, который должен содержать 3 основных элемента: breakpoints, classes, turbo_classes.

Breakpoints

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

Classes

А в этом массиве указываются классы для каждой точки. Точке с индексом N соответствует класс с индексом N. Т.е. длина этих массивов идентична. В нашем примере будет так: если ширина экрана пользователя

Turbo classes

Без этого параметра Restive.JS не будет добавлять свои стандартные классы. По сути, это строка с перечислением классов, которые вы хотите отслеживать. Стандартные значения, которые можно отслеживать: is_mobile, is_phone, is_retina, is_tablet, is_pc, is_tv, is_portrait, is_landscape. Например, если вы зайдете на наше демо с iPhone, то установятся классы-алиасы mobile, phone, portrait (landscape).

Когда я открываю эту страницу на своём ноутбуке, то у html имеется только 2 класса: landscape и pc.

CSS для Restive.JS

Добавим немного контента нашему HTML. Это будет список, но на разных экранах в одну строку будет помещаться разное количество элементов списка. “Слишком простая задача”, скажете вы и будете правы. Но я хотел бы показать именно суть Restive.JS, до остального каждый доберется сам, благо, сложного ничего там нет. Еще сделаем проверку на устройство.

А вот так мы будем использовать классы-границы в CSS. По-моему, так намного понятней, чем использовать медиа-выражения (внимание, абсолютно субъективное мнение).

.device < display: none; width: 96%; font-size: 20px; padding: 2%; text-align: center; background: #eee; >.pc .device-pc, .tablet .device-tablet, .phone .device-phone < display: block; >ul < list-style: none; width: 100%; float: left; padding: 0; margin: 0; >li < width: 25%; height: 200px; line-height: 200px; font-size: 20px; float: left; text-align: center; color: #fff; background-position: cover; >li.casablanca < background: url(casablanca.jpg); >li.moscow < background: url(moscow.jpg); >li.caracas < background: url(caracas.jpg); >li.dehli < background: url(dehli.jpg); >.lt720 li < width: 50%; >.lt320 li

Также в Restive.JS есть несколько удобных событий, которые могут быть особенно полезны (например, при смене ориентации телефона).

Открывайте Демо на разных устройствах, изменяйте экран и т.д.

Источник

Адаптивная верстка на JavaScript. Аналог @media для jQuery скриптов

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

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

И так… нам понадобится библиотеку jQuery и вот такая, простая, функция.

/*ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY*/  $(window).resize(function () < /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/ var widthWind = $(this).width(); if (widthWind > );

Так же я находил более сложные структуры кода, вроде вот этих…

var handleMatchMedia = function(mediaQuery) < if (mediaQuery.matches) < // если менее 480px или равное, то выполняется код между скобок >else < // обратное условие, т.е если более 480px >>, mql = window.matchMedia('all and (max-width: 480px)'); handleMatchMedia(mql); mql.addListener(handleMatchMedia); //запускается каждый раз, когда заданное разрешение медиа запроса достигнуто

Но мне понравился первый вариант, так как он проще и компактнее.

Аналог на нативном JavaScript

Вот тот же эффект без использования jQuery.

document.addEventListener("DOMContentLoaded", function(event) < /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/ var widthWind = document.querySelector('body').offsetWidth; if (widthWind >);

На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник