@Zak12

Количество медиа-запросов в простых сайтах?

Добрый день!
Вопрос к опытным верстальщикам\фронтам, или кто уже хотя бы работает.
Ребята, я новичок, и возникла проблема - мой второй макет в жизни, и первый адаптивный, меня сильно парит то, что у меня получается большое(?) кол-во медиа запросов для одной лишь главной страницы ,преимущественно из за slick`а.
Блоки наезжают друг на друга при уменьшении экрана( по макету должен выглядеть так же как у меня) , и на 2 и 3 слайде блок с текстом в слайдере закрывает мордочку котам.
Из за этого я юзаю медиа запрос, что бы прописать позицию через top\right и отодвинуть блоки друг от друга, тогда все ок.
Подскажите, что я делаю не так ,или так тоже можно ?
Адаптив пока только до 500+ px , до 320 еще не доделал.

https://evgenyshevchenko.github.io/
(ЗЫ, тут не вся верстка, забыл из дома залить на гитхаб, бургер меню нету и тд, дома перезалью, но думаю суть вопроса понятна)

Заранее спасибо, поясните , пожалуйста за кол-во медиа запросов, и насколько это плохо.

Моя мечта стать джуном фронтом, а не версталой ,если что. Поэтому боюсь сильно застрять на верстке и так и не добраться до js/react. Хочу понять, как верстать нормально, а не так как у меня
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 3
Lord_Dantes
@Lord_Dantes
муз. канал t.me/blackstreet69th
Ну как бы сказать что это плохо нельзя, но если это вам приносит дискомфорт значит это плохо.
Возможно стоит пересмотреть верстку со стороный так чтобы минимальное кол-во строк кода ушло на адаптив.
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Идеальная подгонка блоков с текстом под картинки будет работать ровно до того момента, как возникнет необходимость поменять фотографию. И по хорошему придется именно фотографию подбирать так, чтобы на морду котенка не налазил текст. Поэтому если по дизайну нужно чтобы блок наезжал на фото - нужно постараться сделать это наиболее универсально. Это уже придет с опытом. Скорее всего там не будет пикселей, а будут проценты. Если есть дизайн только десктопа, то при адаптивке уже можно располагать блоки рядом или один под одним как у Вас в случае маленького экрана. А количество медиазапросов...та хоть тыщу, главное чтобы решало задачу. Но для себя например я стараюсь укладываться в стандартные брейкпоинты, если возможно.
Ответ написан
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer
Если вас смущает большое количество медиа-запросов, вы можете посмотреть в сторону CSS переменных. Конечно количество медиа-запросов возможно не уменьшится, но зато код станет чистым и понятным, и будет легче менять что-то в верстке и дизайне на разных разрешениях. А по поводу Slick. Попробуйте адаптивный слайдер swiper. Этот слайдер имеет гибкую настройку, много возможностей, а ещё он адаптивный. Кстати я уже писал по поводу CSS - переменных: Как правильно начинать верстать адаптивный сайт?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы