当我放大我的页面正在变成混乱
问题描述：
我需要帮助。当我放大我的页面正在变成一团糟。 我会在这里发布我的代码和它的截图。 Screenshot of page when it isn't zoomedWhen it's zoomed.现在是否有任何可能的解决方法？ 而且当我缩小它正在打破。当我放大我的页面正在变成混乱
我希望我解释得很好。 这里是我的代码：
body {
background: #DF7401;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 100px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
.obsah-top {
background: url(cont-top.png) no-repeat;
background-size: cover;
height: 50%;
box-shadow: 0 0 6px 2px #000000;
}
.stred-obrazok {
width: 200px;
height: 200px;
margin: 0;
top: 50%;
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.uvodny-text {
font-family: Calibri;
font-size: 40px;
color: #008000;
text-align: center;
margin-top: 15%;
}
.pozadie {
position: absolute;
width: 70%;
background: rgba(0, 0, 0, 0) url("pozadie2.png") repeat scroll 0 0;
height: auto;
box-shadow: 0 0 6px 2px #000000;
margin-left: 16%;
margin-top: 7%;
z-index: -50;
}
h1 {
text-align: center;
font-family: Helvetica;
font-size: 35px;
color: #008000;
margin-top: 9%;
}
*{
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t text-decoration: none;
}
.slider{
\t overflow: hidden;
\t height: 350px;
margin-top: 3%;
margin-right: 5%;
margin-left: 5%;
}
.slider figure div{
\t width: 20%;
\t float: left;
}
.slider figure img{
\t width: 100%;
\t float: left;
}
.slider figure{
\t position: relative;
\t width: 500%;
\t margin: 0;
\t left: 0;
\t animation: 30s slidy infinite;
}
@keyframes slidy{
\t 0%{
\t \t left: 0%
\t }
\t 10%{
\t \t left: 0%;
\t }
\t 12%{
\t \t left: -100%;
\t }
\t 22%{
\t \t left: -100%;
\t }
\t 24%{
\t \t left: -200%;
\t }
\t 34%{
\t \t left: -200%;
\t }
\t 36%{
\t \t left: -300%;
\t }
\t 46%{
\t \t left: -300%;
\t }
\t 48%{
\t \t left: -400%;
\t }
\t 58%{
\t \t left: -400%;
\t }
\t 60%{
\t \t left: -300%;
\t }
\t 70%{
\t \t left: -300%;
\t }
\t 72%{
\t \t left: -200%;
\t }
\t 82%{
\t \t left: -200%;
\t }
\t 84%{
\t \t left: -100%;
\t }
\t 94%{
\t \t left: -100%;
\t }
\t 96%{
\t \t left: 0%;
\t }
\t 100%{
\t \t left: 0%;
\t }
}
.box-1 {
width: 45%;
height: auto;
background: #DF7401;
box-shadow: 0 0 6px 2px #DF7401;
margin-left: 2%;
float: left;
margin-top: 6%;
}
.obrazokvboxe {
width: 50%;
height: auto;
float: left;
margin-left: 5%;
margin-top: 5%;
margin-bottom: 2%;
}
.box-2 {
width: 45%;
height: auto;
background: #DF7401;
box-shadow: 0 0 6px 2px #DF7401;
margin-right: 2%;
float: right;
margin-top: 6%;
}
p {
margin-left: 3%;
font-family: Calibri;
font-size: 23px;
color: #FFFFFF;
margin-right: 3%;
position: relative;
}
.textvboxe {
margin-left: 0%;
font-family: Helvetica;
font-size: 15px;
color: #008000;
margin-right: 3%;
margin-top: 23%;
}
h2 {
text-align: center;
font-family: Helvetica;
font-size: 25px;
color: #FFFFFF;
margin-top: 9%;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-left: 5%;
margin-bottom: 3%;
margin-top: 5%;
box-shadow: 0 0 6px 2px #6E6E6E;
}
.logo1 {
background-color: #FFFFFF;
float: left;
margin-left: 0;
margin-top: 0;
width: auto;
height: auto;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Domov - TILIA Naturálna medicína</title>
<style type="text/css">
<body>
<ul>
<li><a><a href="domov.html">Domov</a></a>
</li>
<li><a><a href="o-nas.html">O nás</a></a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Produkty</a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Blog</a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Kontakt</a>
</li>
</ul>
<div class="pozadie">
<h1>Vitajte na našej stránke!</h1>
<div class="slider">
\t \t <figure>
\t \t \t <div class="slide">
\t \t \t \t <img src="images/slide_one.jpg">
\t \t \t </div>
\t \t \t <div class="slide">
\t \t \t \t <img src="images/slide_two.jpg">
\t \t \t </div>
\t \t \t <div class="slide">
\t \t \t \t <img src="images/slide_three.jpg">
\t \t \t </div>
\t \t \t <div class="slide">
\t \t \t \t <img src="images/slide_four.jpg">
\t \t \t </div>
\t \t \t <div class="slide">
\t \t \t \t <img src="images/slide_five.jpg">
\t \t \t </div>
\t \t </figure>
\t </div>
<div class="box-1">
<div class="obrazokvboxe"><img src="chudnutie.png"></div>
<h2>Chudnutie</h2>
<div class="textvboxe">
<p>
Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela.
</p>
</div>
<a href="zdravie.html" class="button">Čítať ďalej...</a>
</div>
<div class="box-2">
<div class="obrazokvboxe"><img src="zdravie.png"></div>
<h2>Zdravá výživa</h2>
<div class="textvboxe">
<p>
Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela.
</p>
</div>
<a href="zdravie.html" class="button">Čítať ďalej...</a>
</div>
</div>
</body>
</html>
答
，如果你正在谈论的图像，只需添加img {max-width:100%}但总体上使你的页面效果很好，当你放大，你应该使用media query目标你的屏幕宽度并为屏幕应用自定义CSS。