Category: Адаптивная верстка

01
Дек
2021

swiper как настроить breakpoints на мобильной и планшет одинаково, десктоп стандартно

Подскажите как в swiper настроить breakpoints на мобильной, планшет и малых экранах мониторов чтобы было 1 слайд , а на десктоп стандартно 4 слайда. Как ни делаю мобилка и большой экран работает, остальное берет с десктопа.
new Swipe…

24
Окт
2021

После переворота экрана в 100vh появляется скролл на Iphone. В чем дело?

недавно столкнулся с проблемой на айфонах и андройдах: экран в 100vh все равно скроллился, долго искал решение, в итоге нашел такое:

Так вот, проблема исчезла на айфоне и андройде. Но появилась следующая, при перевороте экрана все работа…

24
Окт
2021

После переворота экрана в 100vh появляется скролл на Iphone. В чем дело?

недавно столкнулся с проблемой на айфонах и андройдах: экран в 100vh все равно скроллился, долго искал решение, в итоге нашел такое:

Так вот, проблема исчезла на айфоне и андройде. Но появилась следующая, при перевороте экрана все работа…

29
Июн
2021

Как разрешить iphone обрабатывать js скрипты в браузере chrome, safary?

Столкнулся с блокировкой js скрипта в iphone 12 при загрузке веб-сайта. Простой скрипт, который переключает видимость меню и загружает пак иконок не работает. Кто с этим сталкивался, как обойти это ограничение без настроек в системе устрой…

26
Апр
2021

Проверка размеров экрана в javascript

Каким образом в javascript можно проверить размеры экрана (в if-е) и в зависимости от этой проверки отрисовывать содержимое страницы? Меня интересуют устройства типа IPad (tablet.js) (используются ли в них скролл)?

20
Апр
2021

Проверить наличие класса у элементов

Помогите пожалуйста разобраться. Необходимо проверить наличие класса _active у элементов и удалить в случае наличия. На этом классе завязано появление многоуровневого меню на сайте. После закрытия основной ветки меню, если была открыта доч…

19
Апр
2021

parentElement.classList.toogle не работает js [закрыт]

Делаю меню на сайте, многоуровневое с выпадающим списком, нужно чтобы на больших тач экранах (вроде планшетов) раскрытие списка происходило по нажатию на стрелку справа от элемента тк сам элемент является ссылкой на дргую страницу, но раск…

21
Мар
2021

Подобрать изображение в зависимости от ширины элемента (компонента)

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

06
Мар
2021

Пропорциональное изменение размеров дочернего элемента (полностью адаптивный квадрат) при изменении размеров родительского элемента

У нас имеется следующий HTML+CSS код:

function parentH() {
let height = document.querySelector(‘#parent_range_H’).value + ‘px’;
document.querySelector(‘#parent’).style.height = height;
document.querySelector(‘#children’).style.he…

05
Фев
2021

Как сделать вращаемый регулятор громкости

Такой вопрос
Есть в дизайне блок который должен выглядеть вот так

кнопки которые я там отметил – должны анимироваться. если с кнопкой слева проблем особых с анимацией нажатия я не вижу, то вот кнопка справа должна регулировать громкость и…

14
Сен
2020

Проблема slick-slider, ломает верстку

Как вообще адаптируются такие ситуации? Просто слайдер ломает блок, и текст ломается также. Я в маленьком ступоре подскажите что можно сделать.Блок просто уходит в право, и не при каком уменьшении это не фиксистся. Помогите любым советом! …

16
Июн
2020

Руководство по синтаксису адаптивных изображений в HTML

От автора: это руководство по синтаксису HTML для адаптивных изображений (и немного CSS). Синтаксис адаптивных изображений — это обслуживание одного изображения из нескольких вариантов в зависимости от правил и обстоятельств. Есть две формы адаптивных изображений, и они предназначены для двух разных вещей. Если ваша единственная цель — увеличение производительности, тогда вам нужно… [crayon-5fa24d7327b67515595920/] Использование адаптивных […]

16
Июн
2020

Руководство по синтаксису адаптивных изображений в HTML

От автора: это руководство по синтаксису HTML для адаптивных изображений (и немного CSS). Синтаксис адаптивных изображений — это обслуживание одного изображения из нескольких вариантов в зависимости от правил и обстоятельств. Есть две формы адаптивных изображений, и они предназначены для двух разных вещей. Если ваша единственная цель — увеличение производительности, тогда вам нужно… [crayon-5ee88d4ca6b62078506709/] Использование адаптивных […]

17
Апр
2020

Адаптивные изображения простым способом

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

17
Апр
2020

Адаптивные изображения простым способом

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

12
Апр
2020

JS обработчик DIV

Народ всем привет. Подскажите, пожалуйста, где копать. Есть скрипт галереи: при загрузке страницы все фото загружаются нормально, но на сайте можно скрыть основное меню и тут возникает проблема – фотографии образуют при скрытом меню пустое…

06
Апр
2020

Единицы измерения CSS, связанные с областью просмотра

От автора: единицы измерения CSS, связанные с областью просмотра, появились несколько лет назад, и со временем я вижу, что они все больше используются разработчиками. Их преимущество заключается в том, что мы можем гибко и динамично оценивать размер вещей без необходимости использования JavaScript. Кроме того, для них легко предоставить запасной вариант. В этой статье мы узнаем […]

06
Апр
2020

Единицы измерения CSS, связанные с областью просмотра

От автора: единицы измерения CSS, связанные с областью просмотра, появились несколько лет назад, и со временем я вижу, что они все больше используются разработчиками. Их преимущество заключается в том, что мы можем гибко и динамично оценивать размер вещей без необходимости использования JavaScript. Кроме того, для них легко предоставить запасной вариант. В этой статье мы узнаем […]

04
Апр
2020

Разместить текст внутри овала

Мне нужно разместить текст внутри блока овальной формы так, чтобы он не выходил за его пределы. Пробовал следующий вариант с использованием shape-outside:

.test-block {
position: absolute;
width: 1000px;
height: 500px;
pad…

29
Мар
2020

Адаптировать изображение под смартфон

Есть одно изображение для компьютера ,а второе для мобильной версии. Как скриптом или css указать чтоб если нужно разрешение для компьютера то подставляло один файлик с изображением,а если меньше то подставляло файлик с изображением для мо…

20
Мар
2020

Адаптивный сеточный макет журнала с помощью всего 20 строк CSS

От автора: недавно я работал над современной версией блогролла. Идея заключалась в том, чтобы предложить читателям подборку последних постов из этих блогов в макете в стиле журнала, а не просто выложить список любимых постов в боковой панели. Легкой частью было получение списка постов с выдержками из избранных RSS-каналов. Для этого мы использовали плагин WordPress, Feedzy […]

20
Мар
2020

Адаптивный сеточный макет журнала с помощью всего 20 строк CSS

От автора: недавно я работал над современной версией блогролла. Идея заключалась в том, чтобы предложить читателям подборку последних постов из этих блогов в макете в стиле журнала, а не просто выложить список любимых постов в боковой панели. Легкой частью было получение списка постов с выдержками из избранных RSS-каналов. Для этого мы использовали плагин WordPress, Feedzy […]

28
Фев
2020

ResizeObserver — новый мощный инструмент для адаптивного Веб

От автора: слово «адаптивный» — это то, что мы часто даже не упоминаем, потому что в наши дни это уже стандарт в веб-разработке. Существует огромное количество различных экранов, и их число постоянно растет. Мы хотим иметь возможность поддерживать все возможные размеры и при этом сохранять хороший пользовательский опыт. И медиа-запросы CSS — отличное решение данной […]

28
Фев
2020

ResizeObserver — новый мощный инструмент для адаптивного Веб

От автора: слово «адаптивный» — это то, что мы часто даже не упоминаем, потому что в наши дни это уже стандарт в веб-разработке. Существует огромное количество различных экранов, и их число постоянно растет. Мы хотим иметь возможность поддерживать все возможные размеры и при этом сохранять хороший пользовательский опыт. И медиа-запросы CSS — отличное решение данной […]

17
Дек
2019

Разница между разрешением CSS и разрешением устройства

От автора: во время работы я видел, как многие веб-разработчики изо всех сил пытались понять, как в веб-браузерах обрабатывать пиксельные единицы в мире экранов высокой плотности. В наши дни экраны высокой плотности и retina экраны есть на всех мобильных устройствах. Это в дополнение ко многим размерам экрана, с которыми мы имеем дело: мобильные телефоны, планшеты, […]

17
Дек
2019

Разница между разрешением CSS и разрешением устройства

От автора: во время работы я видел, как многие веб-разработчики изо всех сил пытались понять, как в веб-браузерах обрабатывать пиксельные единицы в мире экранов высокой плотности. В наши дни экраны высокой плотности и retina экраны есть на всех мобильных устройствах. Это в дополнение ко многим размерам экрана, с которыми мы имеем дело: мобильные телефоны, планшеты, […]