simonc

Эффект телевизионных помех (tv glitch animation)

Адаптивная вёрстка - это вёрстка, которая адаптируется под диапазон экранов с сохранением комфортного взаимодействия с интерфейсом. Делаете Вы её на Flexbox или на Float, не важно. С использование медиа запросов или без - не важно

1) С помощью width, min-width, max-width Вы манипулируете шириной дочерних элементов.
А с помощью свойств flex-shrink и flex-grow Вы распределяете между элементами недостающее или свободное пространство родителя соответственно при его недостаче или избытке.

2) Также, данные свойства влияют на элементы одинаково при изменении главной оси со "строки" на "колонку". Если же Вы зададите элементам ширину, например, 50%, а потом измените flex-direction на column, элементы начнут выстраиваться в колонку (друг под другом), но их ширина станет лишь 30% от родителя.
Это же касается и свойства "flex-basis", которое имеет преимущество в определенных ситуациях перед "width".

3) Никто не запрещает использовать "width".

flex-shrink и flex-grow не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).

Т.е. если значение этих свойств ненулевое - то элементу разрешено сжиматься / расширяться, причём с коэффициентом, определяемым значением этих свойств. При нулевом значении соответствующее изменение запрещено.

Более подробно можно почитать, например, на MDN (раз, два)

Вы можете указать ширину внутренних блоков в процентах, например, 50%. И минимальную ширину блока min-width. В Вашем случае, по половине своей длины 285px. Итого при уменьшении размеров блоков до величины меньшей или равной 285px, блок будет перемещен на вторую строку.

https://jsfiddle.net/b1jzof78/7/

И нет ничего зазорного в использовании media-запросов c flex, это нормально :-)

Если Вы используете фреймворк Bootstrap, возможно есть смысл быть последовательным и соблюдать единообразие в коде.
Как минимум, придерживаться одного выбранного метода.
Ну и наверняка не хуже будет использовать функционал фреймворка там, где это возможно, а не где захочется, раз уж Вы выбрали использовать фреймворк.
Здесь речь не о быстродействии, а об удобстве поддержки кода для других разработчиков или даже для самого себя.

1. В адаптиве для картинок используйте img{ width:auto; max-width:100%; }
2. Чтобы увидеть кто куда вылазит, пропишите *{ border:1px solid red; box-sizing:border-box; }
3. Поработайте еще над футером))
4. Частыми виновниками таких поломок являются стрелки от slick-slider, что в вашем случае и произошло. Укажите им нужное положение (сейчас они вылезли за пределы контейнера)
5. А еще можно убрать box-shadow в отзывах

МС браузеры вроде как не поддерживают...

В таких вещах не стоит гадать, все переменные известны.

Шаг первый: Идем на caniuse.com/#feat=flexbox и находим там поддержку браузерами.
Шаг второй: Идем в репозиторий flexbugs и находим список флексбагов.
Шаг третий: Идем к бизнесу и узнаем список целевых браузеров (он определяется исходя из аудитории).

Сопоставив эти три вещи вы увидите ответ на вопрос, что использовать или не использовать в конкретном случае.

P.S.: И да, тестировать все равно стоит.

https://jsfiddle.net/ec915qxu/
Как вариант

1. item4 задается высота 200%
2. item5 margin справа ~33%

Вариант без backdrop-filter

Если вы о линиях, то я для одного ответа тут уже делал :))


Можно, конечно, просто картинкой на задний фон поставить эти круги.

А ежели вы о вёрстке всего блока — то это уже задание, а не вопрос.

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

Адаптивная верстка - это уже техническая составляющая. HTML и CSS разметка сделана таким образом что элементы имеют "плавность" и легок адаптируются по размер браузера, так же оптимизировано под загрузку мобильных устройств.
Сжатие html, css, javascript и оптимизация изображений, как правило для дисплеев retina добавляются специальные правила, что бы на современных телефонах отображались более качественно.

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

Связана ли адаптивная верстка с дизайном?
Да! Если дизайн не подразумевает собой возможность "плавать" (визуально оставаться целостным), то возникают проблемы.