我设计并编写了一个网站，但是当我放大浏览器时，它会调整大小

Question

我在这个网站上非常努力地工作，但我运行陷入了一个我似乎无法弄清楚的烦恼！我使用的是 Mozilla Firefox，与其他网页不同的是，当我缩放时，所有内容都会错位！通常只有在调整大小时才会发生这种情况，但出于某种原因，它也会在缩放时发生！！我怎样才能解决这个问题？这是下面的代码:)谢谢！ P.S。我的缩放比例是90%，如果有什么方法可以在用户打开页面时自动设置浏览器的缩放比例，请告诉我！

*{margin:0; padding:0;}
.container{
    width:100%;
    height:100%;
    background-image:url(backgrounds/background4.jpg);
    background-size: cover;
    overflow:hidden;
}
body{
    width:100%;
}
.mainHeader{
    width:100%;
    height:100px;
    background-color:rgba(0,0,0,0.6);
    /*background-color:#182418;*/
    /*opacity:0.7;*/
}
.mainHeader nav ul{
    margin-right:70px;
    float:right;
}
.mainHeader nav ul li{
    display:inline-block;
    margin-top:30px;
    margin-right:20px;
}
.mainHeader nav ul li a{
    text-decoration:none;
    font-family:Arial;
    font-size:25px;
    color:#ACACAC;
    margin-right:30px;
}
.mainHeader nav ul li a.active{
    color:white;
}
.mainHeader nav ul li a:hover{
    color:white;
}
.mainHeader img{
    margin-top:-25px;
}
.mainArea .panel{
    margin-left:25%;
    margin-top:2%;
    width:50%;
  height:620px;
  background-color:rgba(0,0,0,0.6);
}
.mainArea .panel h1{
  color:white;
  font-family:Arial;
  padding:50px;
  padding-left:60px;
  text-align:center;
}
.mainArea .panel p{
  color:white;
  font-family:Arial;
  padding:30px 50px 50px 50px;
  text-align:center;
  font-size:25px;
}
.mainArea .panel form{
  margin-right:33%;
    position:relative;
    top:-5%;
    float:right;
}
.mainArea .panel form .name, .email{
  width:300px;
    height:40px;
    border-radius:10px;
    margin-bottom:40px;
    background:rgba(0, 0, 0, 0.55);
    border:none;
    padding-left:20px;
    font-family:Arial;
    font-size:20px;
    color:gray;
}
.mainArea .panel form .body{
  resize:none;
    width:300px;
    height:200px;
    border-radius:10px;
    margin-bottom:40px;
    background:rgba(0, 0, 0, 0.55);
    border:none;
    padding-left:20px;
    font-family:Arial;
    font-size:20px;
    color:gray;
    padding-top:20px;
    padding-right:30px;
}
.mainArea .panel form .submit{
    width:90px;
    height:43px;
    background:rgba(0, 0, 0, 0.55);
    border:none;
    font-family:Arial;
    font-size:20px;
    color:gray;
    padding-top:-3px;
    border-radius:10px;
    margin-top:-5px;
    margin-left:100px;
}
.mainArea .panel form .submit:hover{
    cursor:pointer;
}

<html>
<head>
    <meta charset="UTF-8">
    <title>About</title>
    <meta name="viewport" content="width=device-width, initial scale=1">
    <link rel="stylesheet" href="contact.css">
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/jqueryui.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
    <div class="container">
        <div class="mainHeader">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a class="active" href="#">Contact</a></li>
                </ul>
            </nav>
            <img class="logo" src="logo.png">
        </div>
        <div class="mainArea">
        <div class="panel">
          <h1>Welcome to our contact page!</h1>
          <form action="php/mail.php" method="POST">
            <input type="text" value="Name" name="name" class="name"><br/>
            <input type="text" value="Email" name="email" class="email"><br/>
            <textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/>
            <input type="submit" value="Send!" class="submit">
          </form>
        </div>
        </div>
    </div>
</body>
</html>

这里是名为 background4.jpg 的背景，此外，如果您尝试运行此站点上的代码片段，由于堆栈溢出的布局方式，它会变得一团糟，因为它需要背景图片。所以复制到文本文件效果最好。

Answer 1

遗憾的是，浏览器并没有一种通用的方法来缩放所有内容。至少在没有大量脚本的情况下。

在我看来，设计一个网站并将浏览器强制设置为 90% 也很奇怪。

缩放并不是人们经常做的事情（在桌面上）。为什么不以 100% 的比例设计页面？

Answer 2

如果您的元素在缩放或调整浏览器大小时分散了 window 使用 min-width 和 min-height 作为容器这将使他们以您喜欢的正确方式停留
尝试添加这一行：

.mainArea .panel {
min-width: 790px;
}

我设计并编写了一个网站，但是当我放大浏览器时，它会调整大小

I have designed and coded a website, but when i zoom in on the browser it resizes

html

css

layout