html - 在屏幕尺寸变化时调整 fontawesome 图标的大小

Question

尝试使用以下代码和媒体查询更改 Bootstrap 网格上图标的大小，但似乎无法使其工作。

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .fa-5x {
      font-size: 1em;
    }
    h1 {
      color: red;
      font-size: 1em;
    }
  }

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .fa-5x {
      font-size: 1em;
    }
    h1 {
      color: red;
      font-size: 1em;
    }
  }

<div class="row">
  <a href="washrooms.php">
    <div class="col-lg-4 col-xs-4">
      <center>
        <h3>
          <i class="fa fa-eye-slash fa-5x"></i> <br>Washrooms
        </h3>
      </center>
    </div>
  </a>
  <a href="intermidiate.php"> 
    <div class="col-lg-4 col-xs-4">
      <center>
        <h3>
          <i class="fa fa-shopping-cart fa-5x"></i> <br>Shops
        </h3>
      </center>
    </div>
  </a>
  <a href="intermidiateservice.php">
    <div class="col-lg-4 col-xs-4">  
      <center>
        <h3>
          <i class="fa fa-wrench fa-5x"></i> <br>Services
        </h3>
      </center>
    </div>
  </a>
</div>



</div>

该代码旨在缩小图标大小以适应小屏幕，但不起作用。谁能帮忙指出错误或帮助实现目的。

Answer 1

对于响应式字体大小，您可以使用视口(viewport)宽度 (vw)。

For further reading

PS:这可能不支持所有移动浏览器。

• 帮助:)