使用搜索框创建响应式导航栏

Question

我有一个导航栏，其中有一个示例：http://fiddle.jshell.net/4uq6y5fa。

当所有元素都适合屏幕时，这会按预期显示，但如果我调整窗口大小，则菜单的位开始消失。我该如何解决这个问题？

Answer 1

使用CSS媒体查询：

@media only screen (//defined for particular width)
{
//code of nav bar and search box
}

e.g。

@media screen and (max-width: 300px) {
    body {
         background-color: lightblue;
    }
}

或者，您可以使用em而不是像素来定义百分比（相对）的宽度和高度。

Answer 2

我真的不明白你的意思，你想让菜单反应灵敏，还是想知道问题是什么？

至于使其响应，请使用媒体查询。

  

W3schools ，@ media规则用于为不同的媒体类型/设备定义不同的样式规则。

因此，例如，对于屏幕尺寸为1920x1080，您的宽度为100％，对于1024x720的尺寸，您的宽度为50％。所以你的导航将会＃34;跳跃＆＃34;当某人调整网站大小时，达到50％。