Масштабирование размера/размеров кнопок в соответствии с размером экрана на моей веб-странице.

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

    body {
    background-image: url("Renders/Room2.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    width: auto;
}

header {
    width: 100%;
    height: 100%;
    position: relative;
}

:root {
    --scale: 100;  /* Определите желаемое значение шкалы */
    --button-scale: 100;  /* Определите желаемое значение шкалы кнопки */
    --button-scale2: 100;  /* Определите желаемое значение шкалы кнопки2 */
    --vh: 1vh;
    --wh: 1vw;
}

.buttons1 {
    margin-left: auto;
    margin-right: auto;
    /* min-height: 100%; */
    /* width: 50%; */
    position: fixed;
    top: 15rem;
    min-height: calc(var(--vh) * 40);
    width: calc(var(--vw) * 30);
    aspect-ratio: 16/9;
}

.buttons2 {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
    /* min-height: 100%;
    width: 50%; */
    position: fixed;
    top: 15rem;
    left: 40rem;
    min-height: calc(var(--vh) * 40);
    width: calc(var(--vw) * 30);
    aspect-ratio: 16/9;
}

.audiobutton {
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: absolute;
    left: 5rem;
    z-index: 1;
}

.audiobutton:hover {
    background-image: url(Renders/0001.png);
    z-index: 2;
}

.photobutton {
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: absolute;
    left: 22rem;
    padding-right: 6rem;
    z-index: 3;
}

.photobutton:hover {
    background-image: url(Renders/0002.png);
    z-index: 3;
}

.blenderbutton {
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: relative;
    left: 14rem;
    z-index: 4;
}

.blenderbutton:hover {
    background-image: url(Renders/0003.png);
    z-index: 4;
}

.videobutton {
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: absolute;
    left: 34rem;
    z-index: 2;
}

.videobutton:hover {
    background-image: url(Renders/0004.png);
    z-index: 3;
}

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

Масштабирование размеров кнопок в синхронизации с размерами экрана на вашем веб-сайте

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

Основные проблемы

1. Фиксированные размеры кнопок: Ваша текущая реализация устанавливает фиксированные размеры для кнопок, что приводит к проблемам с адаптивностью.
2. Неправильное позиционирование: Использование фиксированных позиционирований в сочетании с относительными единицами может вызывать проблемы на разных экранах.
3. Невозможность ограничить минимальную ширину экрана: Вы хотите, чтобы ширина окна не уменьшалась ниже 800 пикселей.

Решение

Для решения этих проблем необходимо внести некоторые изменения в ваш CSS-код и применить подход, ориентированный на адаптивность.

Шаг 1: Понимание единиц измерения

Вы используете vh и vw для определения размеров. Это хороший подход, однако вам стоит использовать их более эффективно. Вместо фиксированных размеров лучше использовать относительные единицы, такие как rem и em, что доверяет браузеру самостоятельно управлять масштабированием.

Шаг 2: Изменение CSS для адаптации кнопок

:root {
    --button-size: 10vw; /* Базовый размер кнопки в vw */
}

.audiobutton,
.photobutton,
.blenderbutton,
.videobutton {
    appearance: none;
    border: none;
    aspect-ratio: 16 / 9; /* Сохраняем соотношение сторон */
    width: var(--button-size); /* Используем переменную для ширины */
    height: auto; /* Высота будет автоматически подстраиваться */
    position: absolute; /* Позиционирование для каждой кнопки */
    z-index: 1;
}

.audiobutton {
    left: 5rem; /* Устанавливаем позицию */
}

.photobutton {
    left: 22rem; /* Устанавливаем позицию */
}

.blenderbutton {
    left: 14rem; /* Устанавливаем позицию */
}

.videobutton {
    left: 34rem; /* Устанавливаем позицию */
}

Шаг 3: Запрет сокращения ширины экрана

Для ограничения минимальной ширины окна до 800px вы можете добавить следующий код в ваш CSS:

body {
    min-width: 800px; /* Запрет на уменьшение ширины окна меньше 800 пикселей */
    overflow-x: hidden; /* Скрываем лишний контент по оси X, если экран меньше 800px */
}

Шаг 4: Использование медиа-запросов

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

@media (max-width: 800px) {
    :root {
        --button-size: 30vw; /* Увеличиваем размер кнопок для меньших экранов */
    }
}

Дополнительные рекомендации

1. Использование Flexbox или Grid: Рассмотрите возможность использования Flexbox или CSS Grid для более точного контроля над размещением и адаптивностью кнопок. Это позволит вам лучше управлять адаптацией по высоте и ширине в зависимости от контента.

2. Подключение Bootstrap: Если вы решили использовать Bootstrap, обратите внимание на классы d-flex и justify-content-between, чтобы организовать кнопки в адаптивном макете.

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

Заключение

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