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

07
Май
2022

Как сделать фиксированную верстку без meta viewport

Вопрос простой, как сделать фиксированную верстку (одинаковое отображение сайта на любой ширине и возможность его мастабирования) без использования запроса вида:
<meta name="viewport" content="width=1660" />

29
Мар
2022

Растяжение логотипа и гамбургера при изменении ширины экрана с помощью javascript [дубликат]

В связи с вопросом Выравнивание логотипа с помощью css возник вопрос:
"Как с помощью javascript при расширении размера окна веб-браузера добиться того, чтобы положение и размеры логотипа и гамбургера изменялись пропорционально? Также…

22
Мар
2022

Как поставить нужный порядок элементов в Bootstrap 5? (нестандартная ситуация)

Моя проблема заключается в следующем:

  1. При адаптивной верстке необходимо, чтобы при расширении экрана xxl+ было вот так:
    3 квадрата, красный, синий и зеленый. Красный и синий стоят в одном столбце. Зеленый занимает "две строки и по высоте как красный на синем.
  2. При остальном расширении (xl и меньше) необходимо создать следующий порядок:
    порядок блоков вертикально сверху вниз: красный синий зеленый (при width: 100%)
09
Фев
2022

Выпадающее меню не показывает подменю и закрывается при клике

Всем привет! Вопрос в адаптивной версии бургер меню. При адаптиве при нажатии на пункт меню, меню закрывается, но при нажатии на ссылку "Выпадающее меню" все меню тоже закрывается, а должно открывать список под меню.
Я только из…

12
Янв
2022

Адаптивное меню JS

Есть адаптивное меню, которое должно открывать при клике на определенном разрешении, но при обновлении страницы изначально меню показывается открытым.
const menu = document.querySelector(‘.nav-list’);
menuItem = document.querySelectorAll(‘…

12
Янв
2022

Адаптивное меню JS

Есть адаптивное меню, которое должно открывать при клике на определенном разрешении, но при обновлении страницы изначально меню показывается открытым.
const menu = document.querySelector(‘.nav-list’);
menuItem = document.querySelectorAll(‘…

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-5ee88d4ca6b62078506709/] Использование адаптивных […]

16
Июн
2020

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

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

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…