javascript - CSS:不同分辨率的缩放问题

Question

我在以相同的方式在每个分辨率上扩展我的网站时遇到一些主要问题。我什至不知道是否可以在每个显示器上以相同的方式缩放它。这是一个学校元素，但当它看起来像那样时我不能交上去。可能是一些非常愚蠢的初学者问题......

that is how it is supposed to look:

你们能给我一些提示，如何避免将来出现此类问题吗？ 感谢您的任何回应。

function muteBtn() {
    var btn = document.getElementById("mute-btn");
    var vid = document.getElementById("video");
    var img = document.getElementById("img");

    btn.addEventListener("click", function() {
        if (vid.muted == false) {
            vid.muted = true;
            img.src="bilder/mute.png";
        } else {
            vid.muted = false;
            img.src="bilder/unmute.png"
        }
    });
}
function swapContent() {
    var btn0 = document.getElementById("btn0");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var btn4 = document.getElementById("btn4");
    var btn5 = document.getElementById("btn5");
    var btn6 = document.getElementById("btn6");
    var home = document.getElementById("p-home");
    var leben = document.getElementById("p-leben");
    var karriere = document.getElementById("p-karriere");
    var alben = document.getElementById("p-alben");
    var filme = document.getElementById("p-filme");
    var ausz = document.getElementById("p-ausz");
    var quellen = document.getElementById("p-quellen");

    var currentid = home;
    home.style.display = "block";

    btn1.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = leben;
        currentid.style.display = "block";
    });

    btn2.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = karriere;
        currentid.style.display = "block";
    });
    btn3.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = alben;
        currentid.style.display = "block";
    });
    btn4.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = filme;
        currentid.style.display = "block";
    });
    btn5.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = ausz;
        currentid.style.display = "block";
    });
    btn6.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = quellen;
        currentid.style.display = "block";
    });
    btn0.addEventListener("click", function () {
        currentid.style.display = "none";
        currentid = home;
        currentid.style.display = "block";
    });
}

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    margin: 5px;
}

header {
    position: fixed;
    display: block;
    font-family: Arial;
    color: white;
    width: 98%;
    max-height: 32%;
    margin: 10px;
    border: 1px solid white;
    background-color: black;
    text-align: center;
    overflow: hidden;
}

header h1 {
    border: 1px solid black;
    background-color: black;
    padding: 2px;
    font-size: 5.5em;
    font-weight: bold;
    letter-spacing: 11px;
    text-align: center;
    display: inline-block;
    opacity: 0.9;
    overflow: hidden;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-position: center;
    object-fit: cover;
}
nav {
    position: fixed;
    margin: 16.44% 0 0 .7%;
    border: 1px solid white;
    width: 200px;
    min-height: 64.45%;
    padding: 5px;
}
.content-box    {
    position: relative;
    float: right;
    border: 1px solid white;
    height: 28.6em;
    width: 84.75%;
    overflow: scroll;
    padding: 10px 30px 30px;
    color: white;
    margin-top: 16.6%;
    margin-right: .63%;
    font-family: Arial;
    z-index: -1;
}
.button {
    background-color: black;
    text-decoration: none;
    font-size: 1.35em;
    border: none;
    color: white;
    position: relative;
    display:block;
    padding:10px;
    width: 180px;
    text-align: left;
    transition: 200ms;
}
#btn6 {
    top:80%;
}
.button:active {
    transform: translateX(5px);
}
.button:hover {
    background-color: white;
    color: black;
}
#mute-btn {
    float: right;
    position: absolute;
    background-color: transparent;
    border: none;
    padding: 4px;
    top: 82%;
    right: .125%;
    transform: scale(0.8);
    z-index: 2;
}
.content-box div p {
    line-height: 125%;
    font-size: 1.25em;
}
.content-box div h1 {
    color: white;
    font-weight: bold;
    font-size: 3em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eminem</title>
    <link rel="stylesheet" type="text/css" href="css/indexstyles.css">
    <script src="jscript/index.js"></script>
</head>
<body>
    <script>
        window.onload = function() {
            muteBtn();
            swapContent();
        }
    </script>
    <header>
        <h1 id="head">EMINƎM</h1>
            <div class="video">
                <video id="video" autoplay muted loop src="video/rap-god.mp4"></video>
            </div>
        <button type ="button" id="mute-btn"><image id="img" src="bilder/unmute.png"></image></button>
    </header>
    <nav>
        <button type="button" class="button"id="btn0">Home</button>
        <button type="button" class="button"id="btn1">Leben</button>
        <button type="button" class="button"id="btn2">Karriere</button>
        <button type="button" class="button"id="btn3">Alben</button>
        <button type="button" class="button"id="btn4">Filme</button>
        <button type="button" class="button"id="btn5">Auszeichnungen</button>
        <button type="button" class="button" id="btn6">Quellen</button>
    </nav>
    <div class="content-box">
        <div id="p-home">
            <h1>Home: </h1>
            <p>Content</p>
        </div>
        <div id="p-leben" style="display:none">
            <h1>Leben: </h1>
            <p>Content</p>
        </div>
        <div id="p-karriere" style="display:none">
            <h1>Karriere: </h1>
            <p>Content </p>
        </div>
        <div id="p-alben" style="display:none">
            <h1>Alben: </h1>
            <p>3</p>
        </div>
        <div id="p-filme" style="display:none">
            <h1>Filme: </h1>
            <p>4</p>
        </div>
        <div id="p-ausz" style="display:none">
            <h1>Auszeichnungen: </h1>
            <p>5</p>
        </div>
        <div id="p-quellen" style="display:none">
            <h1>Quellen: </h1>
            <p>6</p>
        </div>
    </div>
</body>
</html>

Answer 1

这可能对你有用。

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

但正如其他人已经提到的那样，主要的事情是研究使用媒体查询。这将使您能够针对特定屏幕尺寸的 CSS block 。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp