网站在不同的显示器分辨率和 css 上看起来不同

Question

我正在构建一个简单的登录网站，但我一遍又一遍地遇到同样的问题。我会修复我的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。它似乎坏了，我确信它与媒体查询有关。这是我的代码

https://jsfiddle.net/etjhyw0j/

在第二台显示器上 https://gyazo.com/5460eb6b46b9029945eff2cbbcc6c853

在笔记本电脑屏幕上 https://gyazo.com/8ddbd518e0f8d8a70af1612393939925

我的屏幕分辨率是 1366 X 768 第二屏分辨率为1920 X 1080

Answer 1

只需为您的#container 设置一个合适的最大宽度。

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

哦，并且设置body background-size为“cover”或“contain”以防止长宽比变形，不要使用100% 100%。

https://jsfiddle.net/etjhyw0j/4/