响应式导航栏字体大小适用于 PC 但不适用于 iPhone

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

在文件的顶部。

然后我意识到虽然手机上的字体大小很适合阅读和使用，但显示的菜单对于香肠手指来说有点小.. 所以我正在查看 'increasing' 移动设备导航栏的大小。我发现这个可以在 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 屏幕上有效...当您绘制 window 时，字体会逐渐减小，直到达到最小值，菜单会折叠在其下方 'hamburger'但是字体变大了两倍，只是菜单项。

只需要在小触摸屏上将导航栏字体调大，以使菜单更易于使用...请帮忙。

Answer 1

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

不知道是不是和缓存有关.....

好吧。

响应式导航栏字体大小适用于 PC 但不适用于 iPhone

Responsive navbar font-size works on a PC but not on iPhone

ios

bootstrap-4

navbar

font-size

iphone-x