Question

我使用max-width和width来使我的网站响应窗口大小。当网站变小时，我的内容div不会缩小规模。

内容被告知其最大宽度为800px，并且设置为100％。然而，当外壳容器没有缩小尺寸时。有什么想法吗？

＆＃13;

@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;
	
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

Answer 2

Ur内容具有响应性。既然你没有给空格黑白字母说明为什么它没有下来。添加一些空格并检查出来

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

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

word-wrap: break-word;

Answer 3

解决方案：将Word-Wrap应用于您的段落

字符缠绕：

用法：

允许长词能够打破并换行到下一行：

实现：

p { word-wrap: break-word; }

工作小提琴：https://jsfiddle.net/rittamdebnath/uy2r6jh7/

最大宽度响应宽度问题

3 个答案: