Question

我是网页设计的新手，我很难解决这个问题。

当浏览器最大化时，元素就位。但是当浏览器调整大小时，元素会被扰乱。尤其是第二张图片和＃34;欢迎来到Snaptastic Photobooth＆＃34;

HTML CODE：

    <!doctype html>
    <head>
        <title> Snaptastic Photo Booth </title>
        <link rel = "stylesheet" href = "web.css">
        <link rel = "stylesheet" href = "nav.css">
    </head>

    <body>
     <div class = "header">
     <img src = "imgs/Header.jpg" width = 500 height = 450 alt = "Snaptastic Photobooth">
     </div>

    <div class = "mainNav">
    <ul>
    <li><a href = "#">Home</a></li> 
   <li><a href = "#">Gallery</a></li>
   <li><a href = "#">Services</a></li>
   <li><a href = "#">Reservation</a></li>
   <li><a href = "#">Contact Us</a></li>
   </div>

   <div class = "rsidebar">
   <ul>
   <li><a href = "https://www.facebook.com/Photoboothsnaptastic?fref=ts">Like us on Facebook!</a></li> 
   </ul>
   </div>

   <div class = "container">
   <img src = "imgs/Header1A.jpg" width = 472 height = 62 alt = "Snaptastic  Photobooth">
   <h2> Welcome to Snaptastic Photo Booth! </h2>
   </div>
   </body>
   </html>

CSS：

   body {
   margin: 0 auto;
   font-family: "Palatino Linotype", Basketville, serif;
   background: url(imgs/bg1.jpg) repeat-x;
   background-size: cover;
   font-family: 'Helvetica Neue', sans-serif;
   }

   .header {
   margin: 0 0 0 39%;
   }

   body img {
   border-radius:15px;
   }

   .container {
   position: absolute;
   float: left;
   top: 45%;
   left: 28%;
   right: 25%;
   opacity: 0.9;
   }

  .container img {
  padding: 0 0 0 25%;
  }

  .container h2 {
   padding: 3px 0px 3px 0px;
   font-size: 30px;
   font-family: Agency FB;
   border-bottom: 1px solid red;
   border-radius: 15px;
   text-align: center;
   background: url(imgs/wp1.jpg);
 }

Answer 1

首先，他们在从调整大小中识别最大化时感到困惑。好吧，为了编写响应式网页，首先你必须摆脱固定的像素值，即<img src = "imgs/Header1A.jpg" **width = 472 height = 62** alt = "Snaptastic Photobooth">。此外，不仅这个布局在小屏幕上加扰（因为它应该因为固定的img宽度和高度值），但它也在浏览器的完整窗口上加扰。你使用左：28％和右：25％，不加起来给出100％窗口大小的50％。肯定是它将.container推向右侧3％，这导致了“不在中间”的窗口。另一个原因：你正在使用

.container img {
  padding: 0 0 0 25%;
  }

无论屏幕大小如何，都会导致img元素始终保持在窗口的右侧。此外，您没有使用媒体查询来根据您的需求定位不同的尺寸。

调整浏览器大小时，元素会变得混乱

1 个答案: