2

Требуется адаптивно сверстать страницу, на которой имеется сложный фон, формируемый группой изображений, которые спозиционированы абсолютно (например, декоративные стрелки, спозиционированные так, чтобы визуально быть связанными с разными элементами на странице). Само собой, при изменении размеров окна, позиционирование оказывается неправильным и верстка "плывет". Какие есть приемы для адаптивной верстки страницы с элементами, расположение которых явно задано?

1 ответ 1

4

1. Использовать позиционирование в процентах

Например, размеры вашей секции в дизайне 1400px * 600px, и блок №1 расположен в ней по координатам left: 100px; top 200px. Преобразуем координаты в проценты:

.section {
  width: 100%;
  height: 0;
  padding-bottom: (600px / 1400px * 100%);
}

.block-1 {
  left: (100px / 1400px * 100%);
  top: (200px / 600px * 100%);
}

При таком способе все элементы вашей секции будут пропорционально растягиваться и сужаться, в зависимости от ширины экрана.

Трюк с padding-bottom нужен, чтобы высота секции подстраивалась под изменчивую ширину, не нарушая пропорций.

Также, если вы используете препроцессоры (Less, Sass, Stylus) - можете использовать формулы прямо в стилях. В противном случае вам придется считать проценты по формулам отдельно, и в стилях указывать уже результаты расчетов.

2. Дополнить код @media-запросами

Это поможет в случаях, когда вам нужно поменять саму схему расположения элементов. Например, на широких экранах цепочка из шагов идет в ряд слева направо, а на узких экранах - в столбец сверху вниз.

Для этого вам будет лучше отдельно нарисовать (или запросить у дизайнера) - варианты этой секции для узких (и очень узких, очень широких) экранов. Несколько вариантов. И каждый вариант вы стилизуете тем же способом, что в пункте 1, разделяя их в css @media-запросами.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.