HTML/CSS 元素在调整屏幕大小时移动

Question

我正在制作一个即将完成的节拍器，除了当我降低屏幕高度时，音量滑块向上移动而其他元素向左移动。我怎样才能阻止这个？任何帮助都会很棒，谢谢。

HTML

<div class="controls">
            <input type="range" class="volume-slider kick" max="100" min="0" value="100">
            <h1>Kick</h1>
            <button data-track="0" class="mute kick-vol">
                <i class="fas fa-volume-mute"></i>
            </button>
            <select name="kick-select" id="kick-select">
                <option value="./BeatSounds/kick-classic.wav">Classic Kick</option>
                <option value="./BeatSounds/kick-808.wav">808 Kick</option>
                <option value="./BeatSounds/kick-heavy.wav">Heavy Kick</option>
                <option value="./BeatSounds/kick-tight.wav">Tight Kick</option>
                <option value="./BeatSounds/kick-tape.wav">Tape Kick</option>
            </select>
        </div>

CSS

.volume-slider {
  display: flex;
  -webkit-appearance: slider-vertical;
  height: 3.5rem;
  margin: 1rem 0rem;
  position: absolute;
  cursor: pointer;
  outline: none;
}

.volume-slider.kick {
  left: 5vh;
  top: 19vh;
}

Answer 1

在为不同屏幕准备网站时，您需要使用媒体查询 sizes/devices。

查看此以获取更多信息：https://www.w3schools.com/css/css3_mediaqueries.asp

将媒体查询添加到页面后，您就可以根据屏幕尺寸测试网站的外观。

Answer 2

将您的 .voume-slider.kick 元素的 top:19vh 更改为 top:5rem（或使用 rem 的任何其他尺寸）。

HTML/CSS 元素在调整屏幕大小时移动

HTML/CSS elements moving when screen is re-sized

html

css

resize