Question

另一个有趣的问题。我修改了CSS，使在Bootstrap4驱动的站点上所有文本都可以响应。这很好用，我已经用下面的方法做了...

@media (max-width: 576px) {
    html { font-size: 0.7rem; }
    th { font-size: 1rem; }
}
@media (min-width: 768px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }

}
@media (min-width: 992px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }
}
@media (min-width: 1200px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }
}

那是文件的顶部。

然后我意识到，虽然手机上的字体大小易于阅读和使用，但显示的菜单对于香肠手指来说却有点小。因此，我一直在考虑“增加”移动设备导航栏的大小。我发现这可以在PC屏幕（较小的屏幕）上工作，但由于某种原因无法在手机上播放？

基本上，我已经在媒体部分的第4270ish行下添加了.navbar-nav .nav-link,和font-size: 2rem;行

@media (max-width: 576px) {
  .navbar-nav .nav-link,  
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
    font-size: 2rem;
  }
}

如前所述，它可以在PC屏幕上工作...当您绘制窗口时，字体逐渐减小，直到最小化为止，从而菜单被折叠为“汉堡”，但是字体变成两倍大，只是菜单项。

只需要在小触摸屏上放大导航栏字体即可使菜单更易用...请帮助。

Answer 1

很奇怪，这似乎已经开始起作用...

我想知道它是否与缓存有关.....

好吧。

自适应导航栏字体大小可在PC上使用，但不适用于iPhone

1 个答案: