Question

我已经使用CSS3媒体查询来收缩网页的主体及其所有内容，例如导航菜单和页面标题，以便在网页窗口调整到一定数量后适合大小：

您可以在JSFiddle here

上找到正在运行的页面

这是HTML：

<div id="header">

  <div class="container">
  </div>
</div>

<center>
<div id="navbar">
<div class="navbarcontainer">

              <ul align="center">
              <li><a href="index.html" class="active">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="contact.html">Contact</a></li>

              </ul>

</div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.navbarcontainer{
width:800px;
}


#header{
    background-color:#2E3D4C;
    padding:62px 10px;
    /* -moz-box-shadow: 0px 2px 4px #fff;
    -webkit-box-shadow: 0px 2px 4px #fff;
    box-shadow: 0px 2px 2px #fff; */

    font-family: voces, sans-serif;
    font-size:80px;
    text-align:center;
    margin:0px;
}

#navbar{
    background-color: #fff;
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    padding:6px;


  /*   border-top:3px solid;
    border-color:#d22b2b; */

}

#navbar ul {list-style:none; 
            text-align: left;
            margin: 0 auto;
            font-family: Segoe UI;
            font-size: 15px;
            font-weight: bold;
            padding:6px;            
}

#navbar li {
    display: inline;        
}

#navbar li a {
    text-decoration:none;
    color:#302E2E;
    padding-top: 12px ;
    padding-bottom: 12px ;
    padding-left:22px; 
    padding-right:22px; 
    margin-right:5px;
background-color: #fff;    
}

#navbar li a:hover { color: #d22b2b; background-color:#000;}


body {
        background-color: #D5D8DB;
        min-width:947px;
     }

     body > img {

     float:left;
     margin-left: 155px;
     margin-top: 50px;

     }


@media (max-width: 480px) { 

#navbar{
background-color: red;
float:left;



}

#navbar li a{
background-color: red;
padding:5px 5px;  
}


.navbarcontainer{
width:480px;
}

body, #header, #navbar{
min-width:480px;
}
}

如果您将窗口缩小到480px左右，您将看到媒体查询生效，菜单栏将变为红色，页面的主体宽度也缩小到适合屏幕。

我遇到的问题是一旦缩小并进行媒体查询，如果您然后滚动（水平）到页面的末尾（右），您将看到间隙在导航栏的末尾和页面的末尾之间，差距非常小，但我不知道为什么这会生效。

如果有人解决了这个问题，我们将不胜感激。

Answer 1

如果你使用填充，实际的div宽度将是宽度+填充：你的div为480px，加 5或6px用于填充。

您可以通过添加box-sizing rule：

来解决此问题

* {
    box-sizing : border-box;
    -moz-box-sizing : border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

您还必须添加实际宽度，并将容器设置为100％：

如果div #navbar有width : 480px;和padding : 5px; ...

此div包含另一个.navbarcontainer，

的div width : 480px

然后.navbarcontainer的宽度为480px ，由于其父级的填充而向右移动。所以你有差距。

这解决了问题，但它只是快速调整：

@media (max-width: 480px) { 

#navbar{
background-color: red;
float:left;
width : 480px; /* <-- HERE */

.navbarcontainer{
width :100%;
}

}

但是，再次，这个调整，这个页面可以非常简化！

希望有所帮助！

CSS3 Media Query缩小网页

1 个答案: