当我放大或缩小我的网页时，布局完全改变了。整个页面都乱了。由于缩放，所有的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代码的一部分
要构建响应式设计，您必须根据内容避免一些实践并使用另一些实践。没有什么神奇的规则可以用来修复你的设计。如果你在body标签
上使用min-width可能会对你有所帮助 body{
min-width:1000px;
}