Сделайте весь встроенный контент отзывчивым с Reframe.js
Самая сложная часть встраивания видео – правильная ширина и высота. Эти числа определяют соотношение сторон, и когда они выключены, вы получите изящный видеоплеер.
Это верно для всех встроенных элементов, таких как iframes и виджеты социальных сетей. И эти вещи могут быть еще сложнее с адаптивным дизайном, потому что они, как правило, не адаптивные элементы.
Но с Reframe.jsВы можете сделать любой элемент отзывчивым для любого соотношения сторон.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: 50 полезных адаптивных инструментов веб-дизайна для дизайнеров
Это, пожалуй, один из самых простых, но наиболее ценных плагинов JS в сети. На самом деле он был создан Dollar Shave Club, который на удивление имеет свои Страница GitHub,
Reframe – это один из их бесплатных плагинов, созданный для разработчиков, которым нужен более простой способ обработки адаптивного встроенного контента.
Очевидным виновником является встроенное видео с таких сайтов, как YouTube и Vimeo. Общеизвестно, что трудно заставить эти элементы реагировать без CSS хаки,
С помощью Reframe.js вы просто выбираете любой элемент, на который хотите настроить таргетинг, и перефреймируете его с помощью функции reframe ().
Начните с добавления плагина Reframe.js на свою веб-страницу. Вы можете скачать копию от GitHubи это только 1 КБ.
Затем вы просто передаете функции селектор для любых элементов, которые вы хотите изменить. Загрузите страницу и бум! Вы должны быть все готово.
Например, допустим, у вас есть несколько видео, встроенных на ваш сайт. Вы можете добавить класс .video для встраивания и использовать его в качестве селектора. Reframe автоматически добавляет div и класс вокруг него для создания адаптивного стиля.
Итак, ваш код JavaScript будет выглядеть так:
Reframe ( ‘видео’);
Довольно просто, верно?
Этот код предназначается для всех элементов с классом .video и делает их отзывчивыми. Никаких дополнительных хаков, никаких дополнительных CSS. Конечно, нет ничего плохого в использовании метода CSS, но вам нужно будет вручную обернуть все встроенные видео дополнительным классом.
Reframe просто экономит вам этот дополнительный шаг и делает все это с помощью JavaScript. Чтобы проверить демонстрацию и найти некоторые основные фрагменты кода, посетите Reframe.js домашняя страница, Вы можете скачать копию кода прямо с GitHub репо,
Читайте также: 30 полезных адаптивных уроков по веб-дизайну
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)