我在互联网上尝试了几种不同的来源。我没有使用bootstrap;我喜欢从头开始做我的网站。它帮助我编程。
我无法让我的网页自动调整到屏幕尺寸。例如，如果您使浏览器变小，则页面崩溃很好而且整洁。
我从这里尝试了这些代码：http://www.gonzoblog.nl/2013/01/16/11-useful-css-code-snippets-for-responsive-web-design/
但我的网页并没有像示例一样崩溃
。<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sunpacking.css">
<title>Sun Packing WebSite</title>
<link href="../../Documents/Sun Packing/sun.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.div1 {
margin: 20px;
}
</style>
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div id="container">
data
</div>
/*Sun Packing CSS */
/*
body{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
*/
#container {
float: none;
border-style: dashed;
border-color: red;
width: 100%; /* 95px*/
height: 100%; /*1400px*/
color: red;
}
答案 0 :(得分：0)
您可以先关闭HTML容器，然后举例说明您尝试过的内容。
如果您设置了明确的宽度width: 800px;，那就是它将呈现的宽度。
尝试为此设置容器max-width，并将宽度设置为扩展为
我通常这样做的方式：
.container {
max-width: 800px;
width: 100%;
}
答案 1 :(得分：0)
尝试使用百分比而不是像素。像素将为您提供固定的宽度。保持事物成比例的百分比。
这是一篇很好的文章，可以帮助您了解不同度量的含义。 了解它们的含义后，您应该可以根据期望的用途进行更好的选择。