Question

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

＆＃13;

@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;
    }
  }

＆＃13;

<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>

＆＃13;

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

Answer 1

对于自适应字体大小，您可以使用视口宽度（vw）。

For further reading

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

帮助：）

在屏幕大小更改时调整fontawesome图标的大小

1 个答案: