Question

我在这个网站上非常努力，但我遇到了一个我似乎无法弄清楚的烦恼！我正在使用Mozilla Firefox，与其他网页不同，当我缩放时，一切都移动到位！通常这只会在你调整大小时发生，但由于某种原因，它也会用于缩放！我怎样才能解决这个问题？这是代码吼叫:)谢谢！附：我的缩放率为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另外，如果你试图在这个网站上运行代码snipet，它会因为堆栈溢出的布局方式而混乱，因为它需要背景图像。因此，复制到文本文件最有效。

Answer 1

如果您的元素在缩放或重新调整浏览器窗口大小时分散使用min-width和min-height作为容器这将使他们保持你喜欢他们的正确方式尝试添加此行：

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

Answer 2

不幸的是，浏览器无法缩放所有内容。至少没有一大堆脚本。

在我看来，设计网站并强制浏览器达到90％也很奇怪。

缩放并不是人们做了很多事情（在桌面上）。为什么不设计100％的页面？

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

2 个答案: