javascript - 媒体查询导航栏中的 Fa 图标分布

Question

当屏幕最大宽度为 414 时，我正在寻找在屏幕的整个宽度上均匀分布 fa-icons 并隐藏导航栏品牌的最佳方法，因为当我使用 hidden-xs 时它隐藏到 700pt 并且我想把它恰好隐藏在 414 上，并在 Fa 图标之间留出均匀的空间

tab-icon {
  display: inline-block;
  margin-left: 15px;
  margin-right: 150px;
  vertical-align: middle;
  list-style: none;
  padding-right: 15px;
}
.tab-icon li {
  margin-left: 2.5vw;
  margin-right: 2.5vw;
 
}
.tab-icon li a{
  color: #000;
  margin-top: 50%;
  
  @media screen and (max-width: 414px) {
  .tab-icon li {
      margin-left: 7.5vw;
      margin-right: 7.5vh;
 
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar-header page-scroll">
                 <ul class="tab-icon pull-right list-inline hidden-lg">
                        <li><a class="fa fa-home fa-2x " href="#home"></a></li>
                        <li><a class="fa fa-handshake-o  fa-2x" href="#service"></a></li>        
                        <li><a class="fa fa-download fa-2x" href="#download"></a></li>
                        <li><a class="fa fa-car fa-2x" href="#chauffers"></a></li>
                </ul>
                
                <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
            </div>

Answer 1

瞧，你可以像这样做一个 flexbox。唯一的缺点是您不能使用 Favicon 图标，您必须使用图像，因为图像会拉伸(stretch)，而字体不会。

.tab-icon {
   display: flex;
    align-items: stretch;
  
    flex-flow: row nowrap;
  width: 500px;
  list-style: none;
  
}

.tab-icon li {
   flex-grow: 1; 
  }

.tab-icon li img{
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar-header page-scroll">
                 <ul class="tab-icon pull-right list-inline hidden-lg">
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>    
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                        <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
                </ul>
                
                <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
            </div>