html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Полезные jQuery плагины для адаптивного дизайна

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

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

Isotope

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

* * *

jQuery Mansory

Еще один плагин, который позволяет изменять сетку сайта это jQuery Mansory. Он стремится расположить все доступные элементы таким образом, что бы минимизировать пустые места по вертикали между ними. Его применение дает одни из лучших результатов для экранов мобильных устройств.

* * *

Responsive menu

 

Responsive menu это простой плагин, который делает меню удобным на экранах малого разрешения.

* * *

Convert a Menu to a Dropdown for Small Screens


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

* * *

Responsly.js

Плагин Responsly jQuery позволяет управлять всем сайтом, редактируя всего один CSS файл. Его основная задача это создание версии страницы для экранов мобильных устройств. Обеспечена поддержка всех популярных браузеров, но мы рекомендуем особо тщательно тестировать его работу в IE.

* * *

Breakpoints.js

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

* * *

jFontSize


Мы все привыкли к кнопке A+/A-, которую можно встретить на множестве сайтов. Плагин jFontSize выполняет те же функции. Он адаптирует размер шрифта для наилучшего отображения на экране в соответствии с разрешением экрана пользовательского устройства.

* * *

Fit Text

С помощью Fit Text заголовки на страницах вашего сайта будут менять размер в зависимости от размеров экрана используемого устройства.

* * *

jQuery UI mediabox

jQuery UI mediabox это универсальный плагин, с помощью которого могут быть изменены размеры любых элементов на странице, например, видео с YouTube или Vimeo. Все изменения могут происходить в реальном времени.

* * *

FitVidJS

Этот плагин изменяет размер встроенных видео в зависимости от ширины экрана.

* * *

Photo Swipe

Photo Swipe это универсальная фотогалерея на основе Javascript. Она разрабатывалась в первую очередь для использования на мобильных устройствах. Ее применение позволит сделать просмотр изображений на вашем сайте интуитивным для всех пользователей мобильных платформ.

* * *

Elastislide

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

* * *

Responsive Thumbnail Gallery

Этот плагин позволяет создать изображения двух размеров. Вам потребуется определить пороговое значение размера, после которого будет показываться изображение другого размера. Со всем остальным плагин справится сам.

* * *

Adaptive images

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

* * *

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

  • 980px: монитор
  • 768px: планшет
  • 480px: смартфон (ландшафтная ориентация)
  • 320px: смартфон (портретная ориентация)

Ниже мы приведем несколько примеров:

* * *

Шаблон сайта о моде #37517

* * *

Промышленный шаблон #37685

* * *

Бизнес шаблон #37359

* * *

Благотворительная организация #37421

* * *

Бизнес шаблон #37735

 

* * *

Свадебный шаблон #37765

Автор — Илья Скрипка

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

105
    +87 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции