Javascript 网站在不同的显示器分辨率下看起来不同&css不起作用

我正在建立一个简单的登录网站，我不断遇到同样的问题，一遍又一遍。我会修复我的css，一旦我把它切换到我的第二个显示器，因为我正在做双屏，它伸展开来，看起来很糟糕。我对此进行了研究，发现我可以添加

$("document").ready(function() {
           var screenHeight = screen.height;
if (screenHeight < 800) {
  $('body').css('zoom', 0.);
} else {
     $('body').css('zoom', 1);
}

但这让媒体查询改变了位置，我不得不做无数次编辑才能得到同样的结果。如果有人能看一下我的代码并帮助我吗？基本上，我只是想让所有的东西在不同的屏幕分辨率下看起来平滑。还有img div，login div不允许我移动他div的备份。它似乎坏了，我相信这与媒体的质疑有关。这是我的密码

在第二个监视器上

在笔记本电脑屏幕上

我的屏幕分辨率是1366x768

---

第二个屏幕分辨率为1920 X 1080

只需为容器设置一个合适的最大宽度

#container{
    width: 100%;
    min-width: 200px;
    max-width:700px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0%;   
}

哦，并将主体背景大小设置为“覆盖”或“包含”以防止变形纵横比，不要使用100%100%

---

您是否考虑过使用屏幕分辨率或纵横比来补偿两个屏幕之间的差异？您的意思是像使用仅媒体屏幕一样。。。部分？Yupp，用于参考特定设备/分辨率。此外，查看您对下面答案的评论，您可以查看使用flexbox垂直居中登录表单，并将包装div设置为屏幕高度。感谢您的建议！我会进一步研究的谢谢你，我明白了，但是css不允许我移动输入div或img div怎么样？它似乎只发生在我的LaptoScreen上，当我把它放在第二个屏幕上时，它会移动我认为这是媒体查询导致的，当我移除它时，它会移动back@Jagr你想把它们放在哪里？我想要它，这样用户就不能向下滚动页面，比如回到150px或100px