Question

我正在尝试制作一个可以在我的网站上运行的导航栏。不幸的是，在较小的屏幕上，顶部的按钮突然出现在黑条下方。我试过并试图解决这个没有运气。如何使导航栏的所有方面在大，中，小屏幕中保持最佳状态？

|----------------RESULT_TABLE----------------|
|    DATE    | COUNT_TABLE_1 | COUNT_TABLE 2 |
| 2014-04-10 |       0       |       1       |
| 2015-05-01 |       6       |       6       |
| 2015-06-23 |       1       |       0       |

Answer 1

您可以使用Media Queries作为Responsive Web Design技术来帮助解决问题。有很多tutorials out there，你必须做一些游戏才能得到你想要的东西，特别是。但是，举个简单的例子：

我们的想法是，在您的CSS中，您设置一个媒体查询，以帮助确定屏幕大小。媒体查询只不过是一个简单的过滤器，基本上说：

if (screen == big) 'use this css'
else if (screen == small) 'use this css'

我将在下面尝试插入一个示例，您可以通过使浏览器窗口大小不同，或者打开开发人员工具并将布局更改为不同的移动模拟来简单地测试我的意思。（如果您不知道如何执行此操作，请参阅this article on how to do it with Google Chrome ）

经过一些测试后，我发现最好点击代码段上右上角一角的整页按钮>当你运行它时。

＆＃13;

#a, #b { color: #f8f8ff; padding: 1em; text-align: center; }

@media (min-width: 640px) {
  #a { background: blue; }
  #b { border-top: 1px solid; }
  }
@media (max-width: 640px) {
  #a { background: red; }
  }

#b { background: red; }

＆＃13;

<div id="a">
  This is a Blue Div when Big
  </div>
<div id="b">
  But it will turn as Red as this div when small
  </div>

＆＃13;

More information on Responsive Web Design
_{你也可以谷歌}

Navbar在各种屏幕上调整大小

1 个答案: