Question

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

应该是这样的样子：

你们能给我一些提示，以防止将来发生此类问题吗？感谢您的回复。

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块定位为目标。

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

CSS：使用不同分辨率缩放问题

1 个答案: