Question

我正在尝试创建一个响应式网页。在页面中，当浏览器的大小减小时，页眉和页脚工作正常但导航部分不是这样。当前减少（将网页的左边界移动到左侧）网页的大小正在分割导航块分为两行。

我想要的是减少导航块的大小，就像页眉和页脚一样。我怎样才能做到这一点？

<!DOCTYPE html>
<html>
<head>
<title> Responsive </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

@media screen and (max-width:959px) {

    div.container {
        width: 100%;
    }

    article {
        margin-top: 20px;
        margin-left: 0px;
    }

    .div1 {
        height: 15px;
        background-color: red;
        font-size: 30px;
        padding: 15px 10px;
        font-weight: bold;
    }

    nav {
        max-width: 600px;
        margin-left: 40px;
        overflow: hidden;
        margin: 0;
        margin-top: -50px;   
    }

    nav ul {
        text-align: center;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    nav ul li {
         float: left;
         display: inline-block;
    }

    nav ul a {
        *display: block;
        text-align: center;
        text-decoration: none;
        padding: 20px;
    }
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>

<div class = "div1"> 
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
</div>
<div class = "div2">
<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most
populous city in the  United Kingdom, with a metropolitan area of over
13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by
the Romans, who named it Londinium.</p>
</article>
</div>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

Answer 1

点击此处 jsfiddle

导航分为两行，因为链接（a）太大而且有一个大的填充20px。因此，当屏幕变小时，您应该减少font-size和padding。

例如：

 @media screen and (max-width:768px) {
     nav ul li a { font-size:20px;}
 }
 @media screen and (max-width:480px) {
      nav ul li a { font-size:15px;padding:20px 10px}
 }

使用媒体查询的响应式网页设计

1 个答案: