使用 twitter bootstrap 在移动设备上使用更大的字体答案

【问题标题】：bigger font on mobile devices using twitter bootstrap使用 twitter bootstrap 在移动设备上使用更大的字体
【发布时间】：2015-06-26 08:42:24
【问题描述】：

我想为我的应用程序的内容制作更大的字体，其中 CSS 基于 twitter bootstrap 3。我已经尝试过 this question 的解决方案，但它会被 bootstrap 本身覆盖，我试过了：

@media (max-width: 600px)
html {
  font-size: 130%; // strikethrough in chrome = inactive style
}

这就是我加载 CSS 的方式（从凉亭获取引导文件）：

    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-theme.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">

如何使最大宽度设备的字体更大？

编辑：添加!important 不会改变任何东西。我可以看到引导程序正在从以下 CSS 覆盖字体：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

【问题讨论】：

你把那个 CSS 放在哪里了？肯定是在默认引导文件之后加载的吗？
@AnnieMac 查看我的更新
您知道媒体查询中缺少大括号吗？

标签： html css twitter-bootstrap font-size

【解决方案1】：

试试这个，它应该可以工作，但一定要在引导CSS之后包含代码

@media (max-width: 600px){
  html {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

如果它被body 覆盖，则使用：

@media (max-width: 600px){
  body {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

【讨论】：

您这里缺少一些大括号。
@tkoomzaaskz 看看修改后的答案
@DavidG 已经更正了我的代码，你是对的，可能更好地正确显示它，无论如何这可能是问题

【解决方案2】：

尝试在html 和正文上设置字体并在引导CSS之后加载您的css。

@media (max-width: 600px){
    html, body {
      font-size: 130%; // strikethrough in chrome = inactive style
    }}

【讨论】：

【解决方案3】：

您的媒体查询缺少大括号。如果没有这些大括号，媒体查询实际上不会应用于任何后续内容。

@media (max-width: 600px) 
{
    html {
        font-size: 130%; // strikethrough in chrome = inactive style
   }
}

【讨论】：

【解决方案4】：

您的媒体查询缺少大括号，它应该是

@media (max-width: 600px) {
html {
 font-size: 130%; // strikethrough in chrome = inactive style
 }
}

【讨论】：