css - 当我放大或缩小页面时，我的页面布局发生了变化。 css中应该包含什么来防止这个错误？

Question

当我放大或缩小我的网页时，布局完全改变了。整个页面变得困惑。由于缩放，所有 div 在我的页面上到处都是。而且底部滚动条也没有显示，这就是为什么整个内容都在页面下方并且页面看起来很奇怪的原因。

在我的 css 编码中，我在某处使用了 % 而在某处使用了 px 作为参数单位。为了安排一些内容和 div，我使用了 top 和 left 参数。这些是我的页面表现如此的原因吗？请解决我的问题。

这是我的 CSS 代码示例:

body {
background-color: #AADFF4;
margin: 0 auto;
} 

#header {
margin: auto;
width: 100%;
height: 24%;
background-color: #3180CB;
box-shadow: inset 0px -1px 8px -1px black;
}

#navibar {
margin: auto;
background: -webkit-linear-gradient(top, #39B54A, #2E8D3B);
background: -moz-linear-gradient(top, #39B54A, #2E8D3B);
background: -o-linear-gradient(top, #39B54A, #2E8D3B);
background: -ms-linear-gradient(top, #39B54A, #2E8D3B);
width: 100%;
height: 5.4%;
position: relative;
box-shadow: 0px 3px 8px black;
z-index: +100;
}

#logo {
margin: auto;
position: absolute;
left: 8%;
}

#navilinks {
margin: auto;
font-family: "segoe ui light", "sans-serif";
font-size: 170%;
letter-spacing: 2px;
word-spacing: 5px;
width: 100%;
height: 100%;
color: white;
float: left;
text-align: center;
font-weight: bolder;
text-shadow: 0px 7px 10px black;
}

#navilinks:hover {
background: -webkit-linear-gradient(#FFF200, #F68E56 );
background: -moz-linear-gradient(#FFF200, #F68E56);
background: -o-linear-gradient(#FFF200, #F68E56 );
background: -ms-linear-gradient(#FFF200, #F68E56);
color: black;
}

#navilinks2 {
margin: auto;
font-family: "segoe ui light", "sans-serif";
font-size: 25;
letter-spacing: 2px;
word-spacing: 5px;
width: 100%;
height: 100%;
color: white;
float: left;
text-align: center;
font-weight: bolder;
text-shadow: 0px 7px 10px black;
} 


#navilinks2:hover {
background: -webkit-linear-gradient(#FFF200, #F68E56 );
background: -moz-linear-gradient(#FFF200, #F68E56);
background: -o-linear-gradient(#FFF200, #F68E56 );
background: -ms-linear-gradient(#FFF200, #F68E56);
color: black;
}

.drop {
position: absolute;
margin: auto;
visibility: hidden;
background: #2E8D3B;
width: 33.3%;
top: 1%;
-moz-transition: margin 2s ease 0s;
-webkit-transition: margin 2s ease 0s;
-o-transition: margin 2s ease 0s;
-ms-transition: margin 2s ease 0s;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: +200;
padding-top: 8px;
padding-bottom: 8px;
font-family: "bookman old style", "sans-serif";
}

#navilinks2:hover+.drop, .drop:hover {
position: absolute;
margin: auto;
visibility: visible;
width: 33.33%;
left: 33.33%;
top: 100%;
background: #2E8D3B;
color: white;
font-family: "bookman old style", "sans-serif";
font-size: 20;
-moz-transition: margin 2s ease 0s;
-webkit-transition: margin 2s ease 0s;
-o-transition: margin 2s ease 0s;
-ms-transition: margin 2s ease 0s;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: +200;
padding-top: 8px;
padding-bottom: 8px;
}

#mainmenu {
margin: auto;
width: 33.333%;
height: 100%;
background: -webkit-linear-gradient(top, #39B54A, #2E8D3B);
background: -moz-linear-gradient(top, #39B54A, #2E8D3B);
background: -o-linear-gradient(top, #39B54A, #2E8D3B);
background: -ms-linear-gradient(top, #39B54A, #2E8D3B);
float: left;
}

#mainmenu:hover #navilinks2 {
background: -webkit-linear-gradient(#FFF200, #F68E56 );
background: -moz-linear-gradient(#FFF200, #F68E56);
background: -o-linear-gradient(#FFF200, #F68E56 );
background: -ms-linear-gradient(#FFF200, #F68E56);
color: black;
}


#contents {
width: 18%;
height: 150%;
margin: auto;
background-color: transparent;
float: left;
}

#maincontent {
position: relative;
margin: auto;
width: 78%;
min-height: 100px;
float: right;
padding-right: 40px;
padding-left: 10px;
z-index: +50;
}


#footerabc {
position: relative;
margin: auto;
height: 20%;
width: 100%;
margin: auto;
background-color: #3180CB;
top: 150%;
box-shadow: inset 0px 5px 10px 0px black;
z-index: -100;

}


#leftcontent {
margin: auto;
width: 45%;
height: 100%;
float: left;
padding-top: 50px;
padding-left: 30px;
padding-right: 10px;
}

#subcontent1 {
margin: auto;
width: 100%;
height: 40%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 10px black;
}

#rightcontent {
magin: auto;
width: 45%;
height: 100%;
float: right;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
}

#gar {
margin: auto;
height: 85%;
width: 38%;
border-bottom-left-radius: 12px;
float: left;
}

#gar img {
margin: auto;
height: 100%;
width: 100%;
border-bottom-left-radius: 12px;
}

#garproduct {
margin: auto;
float: right;
width: 62%;
padding-top: 10px;
text-align: left;
font-family: "verdena", "sans-serif";
font-size: 18;
}

#garproduct2 {
padding-left: 13px;
padding-right: 10px;
padding-bottom: 12px;
}

#garproduct2 a {
color: orange;
text-decoration: none;
}

#garproduct2 a:hover {
color: green;
text-decoration: underline;
}


#buttongar {
margin: auto;
width: 100%;
font-size: 25;
height: 12.7%;
padding-top: 10.7px;
background: -webkit-linear-gradient(top, #39B54A, #2E8D3B);
background: -moz-linear-gradient(top, #39B54A, #2E8D3B);
background: -o-linear-gradient(top, #39B54A, #2E8D3B);
background: -ms-linear-gradient(top, #39B54A, #2E8D3B);
float: left;
border-bottom-right-radius: 10px;
color: white;
text-align: left;
}

#buttongar:hover {
background: -webkit-linear-gradient(#FFF200, #F68E56 );
background: -moz-linear-gradient(#FFF200, #F68E56);
background: -o-linear-gradient(#FFF200, #F68E56 );
background: -ms-linear-gradient(#FFF200, #F68E56);
color: black;
}

#products {
margin: auto;
width: 90%;
padding-bottom: 3px;
text-align: center;
color: #AADFF4; 
top: 100;
position: relative;
font-family: "bookman old style", "sans-serif";
font-size: 25;
letter-spacing: 2px;
word-spacing: 5px;
border: solid;
border-color: #AADFF4;
border-width: 1px;
}

#categories {
margin: auto;
width: 100%;
position: relative;
font-family: "bookman old style", "sans-serif";
font-size: 20;
letter-spacing: 2px;
word-spacing: 5px;
top: 120;
text-align: center;
padding-bottom: 3px; 
background: -webkit-linear-gradient(top, #39B54A, #2E8D3B);
background: -moz-linear-gradient(top, #39B54A, #2E8D3B);
background: -o-linear-gradient(top, #39B54A, #2E8D3B);
background: -ms-linear-gradient(top, #39B54A, #2E8D3B);
}

#categories:hover {
background: #AADFF4;
color: black;
}


#tagline {
position: absolute;
margin: auto;
right: 8%;
font-size: 40;
font-family: "cooper black", "sans-serif";
text-align: center;
color: #FF6700;
top: 5%;
text-shadow: 0px 5px 10px black;
}

a { 
text-decoration: none;
color: white;
}

a:hover { color: black; }

.menu1 {
display: none;
background-color: #AADFF4;
color: black;
margin: auto;
width: 100%;
}


#back {
position: fixed;
height: auto;
width: auto;
margin-top: -2.5%;
margin-left: -5%;
top: 93%;
left: 98%;
border-radius: 10px;
color: white;
text-align: center;
font-size: large;
z-index: +500;
}

#discloser {
font-size: 25;
text-align: justified;
}

#explore {
position: relative;
top: 40;
padding: 20px;
float: center;
color: black;
font-size: 35;
text-align: center;
font-family: "bookman old style", "sans-serif";
}


#newcategories {
width: 100%;
position: relative;
top: 50;
height: 6.55%;
left: 4%;
margin: auto;
text-shadow: 0px 7px 10px black;
background: -webkit-linear-gradient(top, #39B54A, #2E8D3B);
background: -moz-linear-gradient(top, #39B54A, #2E8D3B);
background: -o-linear-gradient(top, #39B54A, #2E8D3B);
background: -ms-linear-gradient(top, #39B54A, #2E8D3B);
text-align: center;
font-size: 28px;
font-family: "monotype corsiva", sans-serif;
color: white;
-webkit-transition: width, background, color, font-weight, left;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
z-index: +600;
overflow: visible;
padding-top: 10px;
box-shadow: 0px 5px 10px black;
}

#newcategories:hover {
width: 110%;
background: -webkit-linear-gradient(#FFF200, #F68E56 );
background: -moz-linear-gradient(#FFF200, #F68E56);
background: -o-linear-gradient(#FFF200, #F68E56 );
background: -ms-linear-gradient(#FFF200, #F68E56);
color: black;
font-weight: bold;
z-index: +600;
overflow: visible;
}

#sidebar {
position: relative;
top: 47;
width: 100%;
height: 59%;
margin: auto;
background-color: orange;
border-top-right-radius: 55px;
border-bottom-right-radius: 55px;
}

#footercat {
position: absolute;
width: 30%;
top: 20%;
height: 63%;
font-size: 25;
font-family: "monotype corsiva", sans-serif;
text-align: center;
border-right: solid 1px white;
}

#footerright {
position: absolute;
top: 20%;
left: 32%;
height: 45%;
width: 40%;
float: left;
font-size: 25;
font-family: "monotype corsiva", sans-serif;
text-align: left;
}

#social {
position: absolute;
top: 18%;
width: 29%;
font-size: 25;
font-family: "monotype corsiva", sans-serif;
right: 1%;
border-left: solid 1px white;
height: 63%;
}

#social img {
width: 10%;
height: 48%;
box-shadow: 0px 5px 10px black;
border-radius: 15px;
}

#social img:hover {
box-shadow: 0px 5px 10px white;
}

#topheading {
height: 15%;
width: 100%;
margin: auto;
background: -webkit-linear-gradient(top, #215688, #3180CB);
background: -moz-linear-gradient(top, #215688, #3180CB);
background: -o-linear-gradient(top, #215688, #3180CB);
background: -ms-linear-gradient(top, #215688, #3180CB);
z-index: +500;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#heading {
margin: auto;
left: 5%;
padding-top: 8px;
color: white;
font-size: 25;
font-family: "bookman old style", "sans-serif";
padding-left: 10px;
text-align: center; 
}

.fontsize {
font-size: 22;
font-family: "segoe ui light", "sans-serif";
}

#abcd {
font-family: "segoe ui light", "sans-serif";
font-size: 18;
padding-top: 10px;
}

这是我完整 CSS 编码的一部分。

Answer 1

要构建响应式设计，您必须避免一些实践，并根据内容使用其他实践。没有一条神奇的规则可以用来修复你的设计。如果你在 body 标签上使用它，也许使用 min-width 可以帮助你

     body{
          min-width:1000px;
     }