javascript - CSS:不同分辨率的缩放问题
问题描述
我在以同样的方式在每个分辨率上扩展我的网站时遇到了一些重大问题。我什至不知道是否可以在每个显示器上以相同的方式缩放它。它是一个学校项目,但当它看起来像那样时我不能交出它。可能是一些非常愚蠢的初学者问题......
这就是它应该看起来的样子:
你们能给我一些提示如何避免将来出现此类问题吗?感谢您的任何回应。
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>
解决方案
这可能对你有用。
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
但正如其他人已经提到的那样,主要的事情是研究使用媒体查询。这将让您以特定的屏幕尺寸定位 CSS 块。
推荐阅读
- python - Flask 路由无法与 mod_wsgi Apache 一起正常工作
- log4net - “log4net:错误 XmlHierarchyConfigurator:找不到属性 [评估器] 在 [log4net.Appender.RollingFileAppender] 上设置对象”
- c - 如何将结构添加到链表?在 C 中
- android - 有没有办法可以在 requestLocationUpdates() 中集成凌空?
- ios - UICollection 单元格在其中一个单元格上更改值时不会更新
- angular - 添加到 Ionic 应用程序的标签显示在 Web 浏览器预览中,但不在应用程序上
- java - 使用java转换为Lambda表达式?
- mongodb - 按计数排序并获取父节点属性
- c - OpenACC 循环未矢量化/并行化:包含调用
- java - 创建一个等待所有 Schedulers.io() 完成的 Mockito 测试用例