Question

我正在为免费代码阵营的项目创建一个投资组合页面，但我无法让我的导航栏响应。它基本上是2个div;一个用于导航按钮，另一个用于背景颜色和形状。我是编码的新手，但却发现了这一点。我正在使用代码笔进行编码，到目前为止，这是我的代码。

HTML

('Foo', 'bar', 'quack.com')

CSS

<div class="container">
    <div id="navigation">
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#Portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>

    <div id="Border">
    </div>
</div>

请帮助，谢谢。

Answer 1

见http://codepen.io/anon/pen/PqEmgP。它使用CSS媒体查询规则。这些规则使网页能够响应不同的分辨率。

在此示例中，在768和991 px之间的屏幕中添加了两个规则：

@media (min-width: 768px) and (max-width: 991px) {
   .navbar{
    font-size: 15px !important;
  }
  .pull-left>img {
  height: 65px !important;
}
}

这会增加任何元素，其中class =“navbar”字体大小（字母大小）等于14像素（屏幕中计数的单位之一）

.navbar{
    font-size: 15px !important;
}

制作响应式网站的另一种方法是使用现成的css规则（称为库）。一个着名的是bootstrap尝试用你的codecamp搜索一下好运

当页面的其余部分响应时，使Nav Bar响应

1 个答案: