网站在不同的显示器分辨率下看起来不同，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%;   
}

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

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