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

Адаптивные веб-страницы с помощью React-Response и TypeScript

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

В этом руководстве мы узнаем о react-responsive библиотеке и о том, как использовать ее с TypeScript в наших проектах. Мы также применим знания из этого руководства для создания простого адаптивного приложения-портфолио. Позвольте кратко объяснить некоторые знания о реальном значении реализации адаптивных веб-приложений.

Что такое адаптивный веб-дизайн?

Согласно MDN, отзывчивый веб-дизайн (RWD) — это подход к веб-дизайну, который позволяет веб-страницам хорошо отображаться на различных устройствах и размерах окон или экранов от минимального до максимального размера отображения. Последние исследования также рассматривают близость зрителя к части контекста просмотра как расширение для RWD. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования.

Реализация RWD в веб-приложениях дает таким приложениям возможность легко настраиваться и адаптироваться к постоянному изменению размеров экрана на устройствах. Создание приложений, которые являются адгезивными RWD, означает, что это веб-приложение имеет плавные и пропорциональные сетки, гибкие изображения и медиа-запросы CSS3, являющиеся расширением правила @media. В этом руководстве мы сосредоточимся на части медиа-запросов при реализации RWD в веб-приложении.

Что такое React-response?

React-responsive — это модуль медиа-запросов, который предоставляет медиа-запросы CSS в качестве компонента или хука для адаптивного веб-дизайна. Это очень полезно для рендеринга или удаления определенных стилизованных элементов в DOM — реструктуризировать DOM с точки зрения стилей CSS / Sass, в зависимости от разрешения / размера экрана.

Онлайн курс «JavaScript — фреймворк React.js»

Научитесь создавать SPA и RIA приложения с нуля

На курсе вы научитесь Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.

Использование react-responseive в наших проектах означает, что мы можем легко разделить контент, который хотим отображать, без написания для него каких-либо дополнительных стилей. Эти стили обрабатываются под капотом, предоставляя нам компонент или интерфейс хука, который мы можем использовать для установки значений max-width или min-width. Эти значения определяют, на каких размерах экрана содержимое будет отображаться или скрываться.

React-response или стилизованные компоненты

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

Повышение качества ваших стилизованных компонентов потребует обработки медиа-запросов с помощью react-responsive, как показано ниже:

Источник

Адаптивная верстка с 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

Источник

Адаптивная вёрстка через 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 Русаков Михаил Юрьевич. Все права защищены.

Источник