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

[Anonymous]

Вопрос для новичков: я пытаюсь заставить мои кнопки (т. е. .audiobutton) на странице index.html масштабироваться по ширине и высоте (но сохранять то же соотношение сторон) в соответствии с размером экрана. На данный момент кнопки (которые также являются изображениями) сохраняют одинаковые размеры и размер независимо от размера или ориентации экрана. Я также пытаюсь сохранить одинаковое расположение кнопок независимо от размера экрана. Мой текущий код в style.css выглядит следующим образом:

Код: Выделить всё

    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;  /* Define your desired scale value */
--button-scale: 100;  /* Define your desired button scale value */
--button-scale2: 100;  /* Define your desired button scale2 value */
--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;
}

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

Подробнее здесь: https://stackoverflow.com/questions/791 ... my-webpage