Используйте CSS zoom для настройки ширины сайта в соответствии с дизайном

Содержание

Вопрос или проблема
Но я настоятельно рекомендую использовать Относительные единицы длины vh (для высоты области просмотра) и vw (для ширины области просмотра), чтобы стилизовать страницу, вместо того чтобы использовать абсолютные значения.
Ответ или решение
Этап 1: Определите CSS-переменную
Этап 2: Напишите JavaScript для обновления переменной
Этап 3: Включите это в ваш HTML
Рекомендации по использованию относительных единиц
Заключение

Вопрос или проблема

У меня есть хорошо спроектированный, адаптивный сайт, который выглядит отлично на почти любом экране. У него есть все медиа-разрывы, чтобы хорошо смотреться на маленьких устройствах, даже на мобильных. Здорово!

Большинство дизайнеров беспокоятся о том, как их сайт выглядит на мобильных и маленьких устройствах… но на днях я посмотрел на свой сайт на очень высоком разрешении экрана. Смотрите, все вебсайты выглядят ужасно, все сжато посередине или слева, где “конец дизайнера мог бы представить любой экран“.

У меня был задан max-width в css для тега body, и это помогло удержать все вместе, но что я заметил, так это то, что просто применяя zoom к тому же тегу body, я смог сделать так, что сайт на этом смешно большом разрешении отображается довольно прилично.

Я хотел бы знать, как я мог бы установить значение зума для применения к css, если ширина body становится действительно большой.

Пока у меня есть:

@media (min-width: 2560px) {
    body{
        zoom: 120%;
    }
 }

Но я хочу, чтобы это значение вычислялось, так что-то вроде:

zoom: calc(1 + 2560 / var(--width));

Но как мне сделать так, чтобы --width был доступен для медиаширины?

Конечный результат должен отображать мой сайт именно так, как мой дизайнер хотел, даже при очень высоком разрешении.

Если вам нужен ответ, который касается абсолютных значений пикселей и зума, вы можете использовать немного JS, чтобы программно установить значение --width в :root.

Сначала вам нужно будет определить @property в css, а затем установить его с помощью js.

Обратите внимание, что я использовал :root, так как это обеспечивает более общее решение, которое делает --width доступным для любого селектора css. Если вам нужно только, чтобы body адаптировался, вы можете изменить фрагмент js, чтобы установить свойство у body вместо этого.

function adjustWidthVar(){
  const root = document.querySelector(':root');
  root.style.setProperty('--width', window.document.body.clientWidth);
}

adjustWidthVar(); // вызвать при загрузке скрипта;
window.onresize = adjustWidthVar; //вызывать каждый раз, когда окно изменяет размер

@property --width{
    syntax: '<number>'; /*предполагается, что все в пикселях*/
    inherits: true;
    initial-value: 0; 
}

div.design{
  zoom: calc(1 + 2560 / var(--width));
}

<html>
<body>
<div class=design>Ваш Дизайн Здесь</div>
</body>
</html>

Но я настоятельно рекомендую использовать Относительные единицы длины vh (для высоты области просмотра) и vw (для ширины области просмотра), чтобы стилизовать страницу, вместо того чтобы использовать абсолютные значения.

Ответ или решение

Для решения вашей задачи, связанной с адаптацией метрики zoom на очень широких экранах, предлагаю следующую стратегию.

Вы хотите, чтобы ваш сайт красиво выглядел на больших экранах, поэтому вы можете использовать медиазапросы и CSS-переменные в сочетании с JavaScript для динамического вычисления ширины доступного пространства. Вот пошаговое руководство, как это можно реализовать.

Этап 1: Определите CSS-переменную

Сначала определим CSS-переменную --width, которая будет хранить текущую ширину области просмотра:

@property --width {
    syntax: '<number>'; /* предполагаем, что все в пикселях */
    inherits: true;
    initial-value: 0; 
}

body {
    zoom: calc(1 + 2560 / var(--width));
}

@media (min-width: 2560px) {
    body {
        zoom: calc(1 + 2560 / var(--width)); /* Это значение будет динамически обновляться */
    }
}

Этап 2: Напишите JavaScript для обновления переменной

Теперь нужно написать JavaScript для обновления значения переменной --width, основываясь на текущей ширине области просмотра:

function adjustWidthVar() {
    const root = document.querySelector(':root');
    root.style.setProperty('--width', window.innerWidth);
}

// Вызываем функцию при загрузке скрипта
adjustWidthVar(); 

// Вызываем функцию каждый раз, когда окно изменяет размеры
window.onresize = adjustWidthVar;

Этап 3: Включите это в ваш HTML

Теперь добавьте HTML-код, включая ваши стили и скрипт:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Адаптивный дизайн</title>
    <style>
        /* Ваши стили здесь, включая правила CSS выше */
    </style>
</head>
<body>
    <div class="design">Ваш Дизайн Здесь</div>

    <script>
        // Ваш скрипт здесь
        function adjustWidthVar() {
            const root = document.querySelector(':root');
            root.style.setProperty('--width', window.innerWidth);
        }

        adjustWidthVar(); 
        window.onresize = adjustWidthVar;
    </script>
</body>
</html>

Заключение

Таким образом, комбинируя медиазапросы, CSS-переменные и JavaScript, вы можете достичь эффектного отображения вашего сайта на экранах с высоким разрешением, сохраняя при этом гибкость и адаптивность вашего дизайна. Если у вас есть дополнительные вопросы или нужны уточнения, не стесняйтесь обращаться!