Javascript CSS：不同分辨率的缩放问题

我有一些主要的问题，以同样的方式在每个分辨率上扩展我的网站。我甚至不知道是否有可能在每个显示器上以同样的方式进行缩放。这是一个学校的项目，但我不能在它看起来像那样的时候交。可能是一些非常愚蠢的初学者问题

应该是这样的：

你们能给我一些建议如何避免将来出现这样的问题吗？ 谢谢你的回复

函数muteBtn（）{
var btn=document.getElementById（“静音btn”）；
var vid=document.getElementById（“视频”）；
var img=document.getElementById（“img”）；
btn.addEventListener（“单击”，函数（）{
if（vid.mute==false）{
vid.muted=true；
img.src=“bilder/mute.png”；
}否则{
vid.muted=假；
img.src=“bilder/unmute.png”
}
});
}
函数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.style.display=“block”；
btn1.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=leben；
currentid.style.display=“块”；
});
btn2.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=karriere；
currentid.style.display=“块”；
});
btn3.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=alben；
currentid.style.display=“块”；
});
btn4.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=filme；
currentid.style.display=“块”；
});
btn5.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=ausz；
currentid.style.display=“块”；
});
btn6.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=quellen；
currentid.style.display=“块”；
});
btn0.addEventListener（“单击”），函数（）{
currentid.style.display=“无”；
currentid=主页；
currentid.style.display=“块”；
});
}

*{
框大小：边框框；
}
身体{
背景色：黑色；
保证金：5px；
}
标题{
位置：固定；
显示：块；
字体系列：Arial；
颜色：白色；
宽度：98%；
最高高度：32%；
利润率：10px；
边框：1px纯白；
背景色：黑色；
文本对齐：居中；
溢出：隐藏；
}
收割台h1{
边框：1px纯黑；
背景色：黑色；
填充：2px；
字体大小：5.5em；
字体大小：粗体；
字母间距：11px；
文本对齐：居中；
显示：内联块；
不透明度：0.9；
溢出：隐藏；
}
录像带{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
最小宽度：100%；
最小高度：100%；
z指数：-1；
对象位置：中心；
对象匹配：覆盖；
}
导航{
位置：固定；
利润率：16.44%0.7%；
边框：1px纯白；
宽度：200px；
最小身高：64.45%；
填充物：5px；
}
.内容框{
位置：相对位置；
浮动：对；
边框：1px纯白；
身高：28.6em；
宽度：84.75%；
溢出：滚动；
填充：10px 30px 30px；
颜色：白色；
利润率最高：16.6%；
保证金权利：.63%；
字体系列：Arial；
z指数：-1；
}
.按钮{
背景色：黑色；
文字装饰：无；
字号：1.35em；
边界：无；
颜色：白色；
位置：相对位置；
显示：块；
填充：10px；
宽度：180px；
文本对齐：左对齐；
过渡时间：200ms；
}
#btn6{
最高：80%；
}
.按钮：激活{
转化：translateX（5px）；
}
.按钮：悬停{
背景色：白色；
颜色：黑色；
}
#静音基站{
浮动：对；
位置：绝对位置；
背景色：透明；
边界：无；
填充：4px；
最高：82%；
右：.125%；
变换：比例（0.8）；
z指数：2；
}
.内容盒分区p{
线高：125%；
字号：1.25em；
}
.内容盒分区h1{
颜色：白色；
字体大小：粗体；
字号：3em；
}

阿姆
window.onload=函数（）{
muteBtn（）；
swapContent（）；
}
艾米纳姆
家
勒本
卡里埃
阿尔本
菲姆
奥斯泽克努根
奎伦
主页：
内容

勒本：
内容

卡里埃：
内容

阿尔本：
三,

菲林：
四,

Auszeichnungen：
五,

奎伦：
六,

这可能对您有用

但是，正如其他人已经提到的，主要的事情是研究如何使用媒体查询。这将允许您以特定屏幕大小的CSS块为目标

---

查看媒体查询。您可以为特定屏幕定义样式