如何让我的网站缩小像这个网站？
问题描述：
我已经开始学习CSS和HTML，因此我对这些语言很陌生。我已经学会了零件如何工作，例如元数据属性"width=device-width,height=device-height,initial-scale=1"，它允许根据设备调整屏幕大小。如何让我的网站缩小像这个网站？
然后我开始在我的网站的工作，但是我对面，我需要帮助的问题就来了：
的问题是，我试图把我的网页内容到一个div，然后试图通过样式它所以效果会像这样的网站：https://www.merlincycles.com/2
然而，当我这样做，并缩小网页的内容（标题，标志，表格等）也移动到边缘但是我想要做的是创建一个类似于提供的网站的效果，以便当用户缩小网站变小，但内容保持不变。请尝试缩小提供的网站以了解想法。
* {
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding: 0em 0em 0em;
}
#container {
padding-right: 10em;
padding-left: 10em;
}
#header {
padding: 0.75em 1em;
background-color: black;
text-align: center;
color: #fff;
}
#header a {
float: left;
color: #fff;
text-decoration: none;
}
#header a:hover {
color: #fcab15;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
#form-container {
padding: 0.75em 1em 3em;
background-color: #065671;
text-align: center;
}
#form-container img {
float: left;
margin-top: -0.75em;
position: relative;
}
#form-container form {
display: inline-block;
vertical-align: middle;
margin-top: 2em;
margin-right: 20em;
}
#form-container form input[type="text"] {
line-height: 2.5em;
font-size: 1em;
}
#form-container form input[type="submit"] {
/*Controls submit box*/
border-color: #008000;
border-style: outset;
background-color: #008000;
line-height: 2.5em;
font-size: 1em;
}
@media (max-width:50em) {
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}
@media (max-width:30.5em) {
#form-container img {
display: block;
margin: none;
}
#form-container label {
display: block;
margin: 0.5em 0;
}
}
@media (min-width:90.5em) {
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}<div id="container">
<div id="header">
<a href="index.html"> Sign in/Register</a>
<div>Need Help? : 02080207651</div>
<div>FREE International shipping on<span>Selected Items</span></div>
<!-- #header -->
</div>
<div id="form-container">
<img src="image/logo.png" alt="logo">
<form action="#">
<input type="text" id="textbox" name="textbox" required placeholder="Search
Bike King...">
<input type="submit" value="Search">
</form>
<!-- #form-container -->
</div>
</div>
答
据我所知，你不希望与页面一起缩放内容。如果我是正确的，而不是这样的：
#container {
padding-right: 10em;
padding-left: 10em;
}
编辑它看起来像这样：
#container {
width: 980px;
margin: 0 auto;
}
* {
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding: 0em 0em 0em;
}
#container {
width:980px;
margin: 0 auto;
}
#header {
padding: 0.75em 1em;
background-color: black;
text-align: center;
color: #fff;
}
#header a {
float: left;
color: #fff;
text-decoration: none;
}
#header a:hover {
color: #fcab15;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
#form-container {
padding: 0.75em 1em 3em;
background-color: #065671;
text-align: center;
}
#form-container img {
float: left;
margin-top: -0.75em;
position: relative;
}
#form-container form {
display: inline-block;
vertical-align: middle;
margin-top: 2em;
margin-right: 20em;
}
#form-container form input[type="text"] {
line-height: 2.5em;
font-size: 1em;
}
#form-container form input[type="submit"] {
/*Controls submit box*/
border-color: #008000;
border-style: outset;
background-color: #008000;
line-height: 2.5em;
font-size: 1em;
}
@media (max-width:50em) {
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}
@media (max-width:30.5em) {
#form-container img {
display: block;
margin: none;
}
#form-container label {
display: block;
margin: 0.5em 0;
}
}
@media (min-width:90.5em) {
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}<div id="container">
<div id="header">
<a href="index.html"> Sign in/Register</a>
<div>Need Help? : 02080207651</div>
<div>FREE International shipping on<span>Selected Items</span></div>
<!-- #header -->
</div>
<div id="form-container">
<img src="image/logo.png" alt="logo">
<form action="#">
<input type="text" id="textbox" name="textbox" required placeholder="Search
Bike King...">
<input type="submit" value="Search">
</form>
<!-- #form-container -->
</div>
</div>当然，你可以改变的宽度。我只将这个例子设置为980px，你应该改变它，然后根据需要设置它。
你在问怎么做_响应式网页设计_这是一个太宽泛的话题来解决这里。我还假设你什么时候说“缩放”_你实际上是指_“调整浏览器窗口大小。”_ – hungerstar