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%;   
}

哦，并将身体背景大小设置为＆＃34;覆盖＆＃34;或＆＃34;包含＆＃34;为防止变形纵横比，请不要使用100％100％。

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

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

1 个答案: