最大宽度响应宽度问题

Question

我正在使用最大宽度和宽度来使我的网站响应 window 尺寸。当网站变小时，我的内容 div 并没有缩小。

内容被告知其最大宽度为 800px，并设置为 100%。但是，当外部容器缩小时，它并没有缩小尺寸。有什么想法吗？

@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'Bebas';
    src: url(Website%20Specific%20Resources/BEBAS.TTF)
}


body {
 background-image:url(Website%20Specific%20Resources/Background.png);
 max-width:1920px;
 width:100%;
 margin: auto;
}

.outercontainer{
      height:100%;
   max-width:1920px;
      width:100%
}

.container {
 max-width:960px;
 width:100%;
 max-height:300px;
 height:100%;
 margin-top: 100px;
 margin:auto;


}

.header {
 background-image:url(Website%20Specific%20Resources/New_Banner_.png);
 max-height: 300px;
 max-width: 1920px;
 width: 100%;
 height: 100%;
 top: 0;
 position: fixed;
 z-index:5;
}



A {
 text-decoration:none;
 font-family: "bebas";
 color: #fff;
 
}

li {
 z-index:2;
 list-style:none;
 float:left;
 padding-right:50px;
 margin-left:25px;
 padding-top:15px;
 font-size:24px;
 
 
}

.nav {
 z-index:2;
 
 position: absolute;
}
.content {
 font-family: "bebas";
 max-width: 800px;
 width: 100%;
 height: 100%;
 margin: auto;
 background-color: #009999;
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>
 <div class="outercontainer">
 <div class="header">
     <div class="container">            
      <div class="nav">
            
     <ul>
        <li><a href="#">Home </a></li>
        <li><a href="#">About  Us </a></li>
        <li><a href="#">Products </a></li>
        <li><a href="#">Gallery </a></li>
        <li><a href="#">Contact  Us </a></li>
        </ul>
        
        </div>
        </div>
        </div>
       
       
        <div class="content" >
          <p>asdasdasdasdaf</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>asdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasda</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>sdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdafasdasdasdasdaf</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
       
        </div>
        </div>
        </div>
</body>
</html>

Answer 1

您的内容是响应式的。既然你没有给 space b/w 个字母来说明为什么它没有下来。添加一些 space 并查看

<p>sdasdafasdasda sdasdafasdasdasdasdafa sdasdasdasdafas dasdasdasdafasd asdasdasdaf</p>

如果你想在没有 space 的情况下打破这个词。你可以添加下面的

word-wrap: break-word;

Answer 2

到目前为止，我可以看到它在 chrome 中调整大小很好。但是我认为您忘记为响应式布局添加元标记 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

解决方案：对您的段落应用自动换行

自动换行：

用法：

允许长词能够换行：

实施：

p {
   word-wrap: break-word;
}

工作Fiddle：https://jsfiddle.net/rittamdebnath/uy2r6jh7/

最大宽度响应宽度问题

Max-width responsive width issues

html

css

width