CSS как настроить адаптивный дизайн по вертикали?

CSS как настроить адаптивный дизайн по вертикали?
Я новичок и только учусь и стараюсь разобраться в основах, гугл уже перекопал - не посылайте туда, не пойду... бутстрап пока не советуйте - еще не дошел, хочу понять базовые принципы прежде чем пользоваться готовыми библиотеками.
Допустим есть макет-лендинг. С шириной более-менее понятно на разных разрешениях что делать - тут можно отталкиваться от ширины экрана, а как быть с высотой?
Допустим макет состоит по вертикали из 7 крупных блоков. У главной обертки я задал фиксированную высоту, допустим body.wrap_page {height: 3660px}, далее я разбил в процентном соотношении остальные блоки от 100% (ну и далее вложенные по иерархии соответственно от них тоже). Все получилось....сначала. Потом я начал менять разрешения экрана и писать медиа-запросы, в этот момент возникла необходимость менять пропорции между блоками - какой-то из них оставить пока как есть, какой-то сделать шире, какой-то наоборот сузить. Вот тут пошла нескладуха - сужая хотя бы один блок внизу страницы получается белое поле, меняешь изначальную высоту - пропорции то остаются теми же и чтобы получить желаемое необходимо пересчитывать каждую желаемую пропорцию от новой высоты. поставить корневой height в авто - вся разметка рушится ибо вложенным процентам нет от чего отталкиваться, сделать корневой height в % - опять же не работает, т.к. теперь ему нет от чего считать себя.
Интуитивно чувствую что должен быть другой - более простой путь, чем пересчитывать и переписывать всю вертикаль цсс под каждое разрешение, но решение не нахожу..... подскажете, что делают матерые верстальщики в таком случае?
  • Вопрос задан
  • 1346 просмотров
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Тут дело в том, что задавать высоту body - зло. Высота, наоборот, задаётся скорее мелким элементам страницы. То есть есть у вас например:
body
    section
        img
    /section
    section
        div
            button
        /div
    /section
/body

Вот здесь уместно было бы задать высоту для img и если очень хочется - для button . Всё остальное регулируется через padding, margin, flex, .... но не через жёсткие размеры.

В таком случае вы просто в медиа-запросах уменьшаете высоту элементам, а всё остальное само подстраивается
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы