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