使窗口变小时顶部栏不重新缩放（HTML、CSS）

大家好，我在这个网站上工作，但我的顶部栏有问题，因为当我把浏览器窗口缩小时，它不会重新缩放。我尝试在各种网站上搜索更多的解决方案，但没有找到任何解决方案。谢谢你的帮助

这是我的密码：

HTML

---

提前感谢

试试这个JSFIDLE示例：

你可以用

margin:0自动和<代码>宽度：50%如我在示例中所述，以实现您想要的效果

这是一个没有硬编码的更新版本，由Paulie_D提供：
为了做到这一点，您需要稍微研究一下响应性web设计。您可以使用百分比来重新缩放div。这里有一个链接，指向我以前编写的一些代码，您可以使用这些代码并创建自己的代码。还可以链接到js FIDLE文件

HTML
CSS
@字符集“utf-8”；
/*CSS文档*/
*{
文字装饰：无；
}
身体{
字体大小：87.5%；/*普通字体14px*/
字体系列：Arial、Helvetica、无衬线字体；
线高：1.5；
文本对齐：左对齐；
}
.身体{
保证金：0自动；
宽度：70%；
明确：两者皆有；
}
#包装纸
{
宽度：100%；
保证金：0自动；
}
#导航{
背景色：#需要；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
-moz不透明度：0.75；
不透明度：0.75；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha”（不透明度=75）；
}
.topContent{
背景色：#FFF；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润率最高：2%；
背景图片：url（paper.jpg）
}
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（-webkit最小设备像素比：2）
和（方向：景观）
和（方向：纵向）
{
.身体{
宽度：90%；
字体大小：95%；
}
.topContent{
背景色：#FFF；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润率最高：2%；
利润底部：4%；
}
}
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：景观）
和（方向：纵向）
{
.身体{
宽度：90%；
字体大小：95%；
}
.topContent{
背景色：#FFF；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润率最高：2%；
利润底部：4%；
}
}
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（-webkit最小设备像素比：2）
和（方向：景观）
和（方向：纵向）
{
.身体{
宽度：90%；
字体大小：95%；
}
.topContent{
背景色：#FFF；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润率最高：2%；
利润底部：4%；
}
}
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：480px）
和（-webkit最小设备像素比：2）
和（方向：景观）
和（方向：纵向）
{
.topContent{
背景色：#FFF；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
填充物：3%5%；
利润率最高：2%；
利润底部：4%；
}
}
我把这里的内容整理了一个更简洁的版本：你能解释一下你想做什么吗？你到底为什么要用这些疯狂的边距来定位你的按钮吗？@Askanison4这要好得多，但既然它是导航，它可能应该是一个未排序的列表，而不是多个div。@NickR哦，当然。但我不打算确定老年退休金计划的意图，只要修复一下坏掉的东西：）酷-@Paulie_D哦，我喜欢这样。很好的例子。介意我把它更新到帖子里吗？对不起，有点乱
         <div class="main">
            <div class ="centering">
                <a href="index.html" >Home</a>
            </div>
            <div class="aboutbutton">   
                <a href="About.html">About Me</a>
            </div>
            <div class="portfoliobutton">   
                <a href="Portfolio.html">Portfolio</a>
            </div>          
            <div class="whatforyoubutton">
                <a href="What can i do for you?">What can i do for you?</a>         
            </div>
            <div class="contactbutton"> 
                <a href="Contact.html">Contact</a> 
            </div>      
        </div>  

            .centering{
            text-align:center;
            margin-top:-8px;
            margin-left:50px;
            margin-right:1050px;
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            border-radius:3px;
            color:white;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 20px;
            font-weight:bold;
            background-color:#2B2930;
            position:relative;
            display:block;
            }

            .aboutbutton{
            text-align:center;
            margin-top:-29px;
            margin-left:293px;
            margin-right:750px;
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            border-radius:3px;
            color:white;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 20px;
            font-weight:bold;
            background-color:#2B2930;
            }

            .portfoliobutton{
            text-align:center;
            margin-top:-29px;
            margin-left:593px;
            margin-right:500px;
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            border-radius:3px;
            color:white;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 20px;
            font-weight:bold;
            background-color:#2B2930;
            }

            .whatforyoubutton{
            text-align:center;
            margin-top:-29px;
            margin-left:843px;
            margin-right:200px;
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            border-radius:3px;
            color:white;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 20px;
            font-weight:bold;
            background-color:#2B2930;
            }

            .contactbutton{
            text-align:center;
            margin-top:-29px;
            margin-left:1143px;
            margin-right:50px;
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            border-radius:3px;
            color:white;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 20px;
            font-weight:bold;
            background-color:#2B2930;
            }

HTML
<body class="body">
<div class="mainContent">
<div class="Content">
<div class="topContent">
<div class="mainHeader">
<div id="nav">
<div align="center"><!--nav start-->    
<div id="nav"><a href="#"><b>Contact Us</b></a></div>
<div id="nav"><a href="#"><b>Ebay</b></a></div>
<div id="nav"><a href="#"><b>Team</b></a></div> 
<div id="nav"><a href="#"><b>Facebook</b></a></div>   
</div><!--end nav-->


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

*{
text-decoration:none;
}
body{
font-size:87.5%; /*Normal font 14px */
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
text-align:left;
}
.body {
margin:0 auto;
width:70%;
clear:both;
}

#wrapper
{
width:100%;
margin:0 auto;
}

#nav{
background-color:#EEECED;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-opacity: 0.75;
opacity: 0.75;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=75);
}
.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
background-image:url(paper.jpg)
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.body {
width:90%;
font-size:95%;
}
.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : landscape)
and (orientation : portrait)
{
.body {
width:90%;
font-size:95%;
}

.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.body {
width:90%;
font-size:95%;
}



.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}