___ Чёткая вёрстка: принципы и паттерны.

правила:

CSS zoom вместо transform: scale().

Свойство zoom реально меняет размер элемента — скролл, центрирование, всё работает само. Поддерживается всеми браузерами (Chrome, Safari, Firefox 126+).

Порядок в коде CSS имеет значение.

Понимание координат: Viewport vs Screen

То, что ты видишь в цитате — это разница между физическим экраном телефона и виртуальным окном браузера.

Viewport (Вьюпорт): Это твоё «окно в мир». Именно под его размер (в твоем случае 360px) должен подстраиваться контент.
Scale (Масштаб): Когда Base scale равен 1.1, это значит, что система немного увеличивает элементы по умолчанию. Если ты используешь фиксированные размеры в пикселях (width: 300px), при изменении масштаба они могут перестать вписываться в экран.

Главное правило: Никогда не строй верстку на жестких координатах относительно края экрана (вроде left: 154px). Используй относительные величины.

2. Современные паттерны: Flexbox и Grid

Чтобы кнопки не «гуляли», забудь про float или ручное позиционирование. Есть два «золотых» стандарта:

Flexbox (для рядов и колонок)

Идеально подходит для кнопок в меню или карточек. Он заставляет элементы «гнуться», но оставаться в строю.

Контейнер: display: flex;
Выравнивание: justify-content: center; (по центру) или space-between; (врассыпную).
Гибкость: flex-wrap: wrap; — если места мало, кнопки перепрыгнут на новую строку сами, а не вылезут за экран.

CSS Grid (для сетки всей страницы)

Позволяет нарисовать «каркас» страницы (шапка, контент, подвал), в который ты просто вставляешь блоки. Это как шкаф с полками: полка не уплывет, если ты положишь на неё вещь побольше.

3. Почему всё «плывёт» при зуме?

Скорее всего, у тебя используются абсолютные единицы или неправильный бокс-модель.

Box-Sizing: Добавь это в начало своего CSS файла. Это заставит браузер включать отступы (padding) внутрь размера элемента, а не раздувать его снаружи.CSS* { box-sizing: border-box; }
Единицы измерения:
- px — используй только для мелких деталей (границы, тени).
- rem или em — для шрифтов и отступов (они зависят от настроек системы).
- % или vw/vh — для ширины и высоты блоков (зависят от размера вьюпорта).
Мета-тег: Убедись, что в <head> сайта стоит: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Это скажет браузеру: «Не пытайся умничать, просто считай, что ширина контента равна ширине экрана».

4. Чек-лист «Чёткой вёрстки»

Контейнеры: Ограничивай максимальную ширину контента (например, max-width: 1200px), чтобы на огромных мониторах сайт не растягивало «в ниточку».
Мягкие изображения: Всегда ставь картинкам max-width: 100%; height: auto;.
Отступы: Используй padding внутри блоков, чтобы текст не прилипал к краям, и gap в Flexbox, чтобы кнопки не слипались.

1. Правило «Кто последний, тот и папа»

Если ты напишешь свойства для одного и того же блока в начале файла и в конце, браузер применит те, что ниже (позже). Например: Если вверху ты написал background: red;, а внизу background: blue;, блок будет синим.

2. Логический порядок (для тебя)

Чтобы не запутаться, лучше писать стили в том же порядке, в котором идут блоки в HTML:

Сначала общие стили (*, body).
Потом header (и всё, что внутри него: .header-nav, .menu-btn).
Потом main.
Потом footer.

Использование переменных в CSS (они называются Custom Properties) — это лучший способ не бегать по всему коду, когда захотелось перекрасить сайт. Это как пульт управления: поменял в одном месте — изменилось везде.

1. Где объявлять переменные?

Обычно их пишут в самом верху CSS-файла в специальном блоке :root. Это делает их доступными для всей страницы.

:root {
    /* Название переменной всегда начинается с двух тире -- */
    --main-color: #2c3e50;
    --accent-color: #e74c3c;
    --text-white: #ffffff;
    --btn-gap: 12px;
}

2. Как их применять?

Вместо того чтобы писать конкретный цвет, ты используешь функцию var().

header {
    background-color: var(--main-color); /* Используем переменную */
}

.menu-btn {
    background-color: var(--accent-color);
    color: var(--text-white);
    margin-right: var(--btn-gap);
}

3. Почему это круто для твоей задачи?

Представь, что у тебя 20 кнопок, и ты решил, что красный цвет (#e74c3c) тебе надоел.

Раньше: Тебе пришлось бы искать и заменять это значение в 20 местах.
С переменными: Ты просто меняешь одну строчку в :root, и весь сайт мгновенно перекрашивается.

4. Можно ли использовать их для размеров?

Да! И это поможет тебе бороться с «плывущей» версткой.

:root {
    --header-height: 60px;
}

header {
    height: var(--header-height);
}

main {
    /* Можно даже считать! Например: высота экрана минус высота шапки */
    height: calc(100vh - var(--header-height));
}

Лайфхак для проверки (Твоя красная рамка)

Ты можешь сделать переменную для отладки:

:root {
    --debug-border: 2px solid red; /* Включить */
    /* --debug-border: none; */     /* Выключить (просто закомментируй) */
}

.scroll-wrapper {
    border: var(--debug-border);
}

Теперь, чтобы убрать все красные рамки на сайте, тебе достаточно закомментировать одну строку в :root.

Шрифты: Только в rem.

Отступы (padding, margin): Только в rem или em.

Ширина контейнеров: В %, vw или используй max-width (в rem).

Высота шапки/футера: Можно в rem, чтобы они росли вместе с текстом кнопок.