响应式导航格式问题答案

【问题标题】：Responsive navigation formatting issue响应式导航格式问题
【发布时间】：2018-02-08 10:33:30
【问题描述】：

我希望对我的导航栏提供一些帮助，它似乎在平板电脑及以下设备上运行良好，但是徽标在桌面上非常挤压，直到它在移动设备上运行良好 - 有人能指出我正确的方向吗解决这个问题？标志会更大，但它现在只是一个占位符（我已经用其他标志测试过，它似乎给出了相同的结果）。

另外，如果有人可以告诉我点击时我将如何使用搜索徽标，它会打开一个搜索字段（如果可能的话，不带 JS！我目前已经让它与 jQuery 一起使用，但没有它也可以！）

我还添加了一个大断点（1024 像素），直到它进入移动视图，因为导航项不适合小调整大小 - 有没有人对更好的格式化导航的方法有任何建议以使其更清晰？

这里有几个问题，但希望它有意义！

提前非常感谢！ :)

桌面图片

较小的设备图片

$(document).ready(function() {

  $(".search-logo").on('click', function() {
    $(".search-bar").toggle();

  });
});

body {
  margin: 0;
  font-family: Arial;
}

.button {
  padding: 15px 25px;
  font-size: 1.2vmin;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: black;
  background-color: #fff;
  border: none;
  border-radius: 35px;
  border: 1px solid black;
}

.search-logo {
  border: none;
  background-color: transparent;
  outline: none;
}

.search-bar {
  display: none;
}

.search-icon {
  font-size: 25px !important; //Due to icon inheriting from external css
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header-right {
  float: right;
  position: absolute;
  right: 20%;
}

@media screen and (max-width: 1024px) {
  .header a {
    float: none;
    display: block;
    text-align: center;
  }
  .header a.logo {
    text-align: center;
    width: 100%;
  }
  .header-right {
    float: none;
    position: static;
  }
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/javascript.js">
  </script>
</head>



<body>

  <div class="header">
    <a href="#" class="logo"></a>
    <div class="header-right">
      <a href="#">ABOUT US</a>
      <a href="#">OUR WORK</a>
      <a href="#">NEWS</a>
      <a href="#">CAREER</a>
      <a href="#">CONTACT</a>
      <a>
        <button type="submit" class="search-logo"><i class="fa fa-search search-icon"></i></button>
        <input type="text" placeholder="Search.." name="search" class="search-bar">
      </a>
    </div>
  </div>

</body>

</html>

【问题讨论】：

标签： jquery css html sass

【解决方案1】：

Art Direction 似乎是您所追求的。但是，这可能会很快变得笨拙。

在您的情况下，您可以简单地使用带有media queries 的弹性框来完成工作。

【讨论】：