Question

请有人帮助我的网站reponsiveness，当视口收缩网站混乱，我不知道我在代码中做了什么，使它像那样。

提前感谢！

＆＃13;

body {
  background-color: #F2F2F2;
}
.body1 {
  background-color: #FFFFFF;
  margin-left: 10vw;
  width: 79.4vw;
  height: 80vw;
  max-width: 1000vw;
  position: absolute;
  overflow: hidden;
  margin-top: 0px;
  font-size: 1.6vw;
  padding: 5px 5px;
}
.webheadimg {
  margin-left: 10vw;
  width: 80vw;
  max-width: 1000vw;
  max-height: 150vh;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: normal;
  overflow: hidden;
}
#menu {
  width: 80vw;
  font-size: 1vw;
  max-font-size: 1.6vw;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: normal;
  font-color: #FFFFFF;
  font-size: 1vw;
  max-font-size: 1.6vw;
  text-align: center;
  margin-left: 10vw;
  background-color: #CA2A2A;
  border-radius: 0px;
  max-width: 1000vw;
}
#menu ul {
  height: auto;
  padding: 0.8vw 0px;
  margin: 0px;
}
#menu li {
  display: inline;
  font-size: 1vw;
  max-font-size: 16vw;
}
#menu a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 0.8vw 0.8vw 0.8vw 0.8vw;
  font-size: 1.5vw;
  max-font-size: 16px;
}
#menu a:hover {
  color: #000000;
  background-color: #FFFFFF;
}
.webheadlogo {
  position: absolute;
  overflow: hidden;
  margin-left: 10vw;
  float: left;
  height: auto;
  width: 5%;
  padding: 5px 5px;
}
@media (max-width: 1285px) {
  body {
    background-color: #F2F2F2;
  }
  .body1 {
    background-color: #FFFFFF;
    width: 72.8vw;
    height: 100vw;
    overflow: hidden;
    font-size: 3vw;
    margin-left: 23.4vw;
    padding: 5px 5px;
    bottom: 48.9vw;
    position: relative;
  }
  .webheadimg {
    width: 96vw;
    height: auto;
    max-width: auto;
    max-height: auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    margin-left: 1vw;
  }
  #menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
    border-radius: 0px;
    max-width: 96vw;
  }
  #menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
  }
  #menu li {
    display: block;
  }
  #menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
    font-size: 3vw;
    display: block;
  }
  #menu a:hover {
    color: #000000;
    background-color: #FFFFFF;
  }
  .webheadlogo {
    position: absolute;
    overflow: hidden;
    margin-left: 1vw;
    float: left;
    height: auto;
    width: 10%;
    padding: 5px 5px;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Hull Daily News</title>
</head>
<<body>
  <div>
    <img class="webheadlogo" src="logo1.png" alt=".logo">
    <img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />

  </div>
  <div id="menu">
    <ul>
      <li><a href="website.html">Home</a>
        <li><a href="breakingnews.html">Breaking News</a>
        </li>
        <li><a href="Sport.html">Sport</a>
        </li>
        <li><a href="Hulltoday.html">Hull Today</a>
        </li>
        <li><a href="Property.html">Property</a>
        </li>
        <li><a href="Social.html">Social Media</a>
        </li>
        <li><a href="Music.html">Music</a>
        </li>
        <li><a href="Reviews.html">Reviews</a>
        </li>
        <li><a href="Movies.html">Movies</a>
        </li>
        <li><a href="Weather.html">Weather</a>
        </li>
    </ul>
  </div>
  <div class="body1">
    Text Box
  </div>
  </body>

＆＃13;

你可以看到＆＃39;文本框＆＃39;跳到屏幕周围，页面底部有一个随机的灰色框，如果有人能找到我的修复，我将非常感激

example

Answer 1

您在<head>标记中缺少视口。您可以使用它，例如：

<meta name="viewport" content="width=device-width"/>

Answer 2

您需要添加

<head>
    ...
    <meta name="viewport" content="width=device-width"/>
    ...
</head>

网站相对于视口宽度的定位

2 个答案: