twitter-bootstrap - 使用 Bootstrap，但文本不响应

Question

我正在做一个学校项目： http: //lauralynn87.github.io/WSP/Project/index.html

我正在使用框架 Bootstrap 3.0 - 几乎所有内容都是响应式的，但文本。

我已经尝试使用百分比和 ems 字体大小..但没有任何效果。我知道我错过了一些东西，但无法弄清楚。

任何帮助表示赞赏。

谢谢。

Answer 1

%如果您使用orem等​​，字体没有响应。

如果您想在不同的屏幕/窗口大小上更改字体大小，则必须在 CSS 中使用媒体查询。

例如：

@media all and (max-width: 1200px) { /* screen size until 1200px */
    body {
        font-size: 1.5em; /* 1.5x default size */
    }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    body {
        font-size: 0.8em; /* 0.8x default size */
        }
    }

这些数字当然只是示例。

Answer 2

这是仅使用 Bootstrap 设备大小的屏幕的移动优先 css 片段。注释：

• Bootstrap 不会根据显示大小的变化来缩放排版。
• 您真的希望 27" 显示器上的字体大小与智能手机相同吗？我看到了一些很好的设计，不同屏幕的不同字体大小是有意义的。测试将证明您的设计是对还是错。
• 您真的希望屏幕和打印字体大小相同吗？屏幕和印刷是不同的野兽。如果你关心打印，你应该单独测试它。
• 我在下面使用的字体缩放是任意的 - 没有魔法。

.

/* xs < 768 */
@media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
}

/* sm */
@media screen and (min-width: 768px) {
    body {
        font-size: 1em;
    }
}

/* md */
@media screen and (min-width: 992px) {
    body {
        font-size: 1.2em;
    }
}

/* lg */
@media screen and (min-width: 1200px) {
    body {
        font-size: 1.3em;
    }
}

显示效果的 jsfiddle：https ://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/ 。请注意，媒体查询仅更改 th, td 字体大小，而不是如上所示的正文。

Answer 3

我建议Fittext jQuery plugin默认情况下使所有文本都响应。它只需要 2 个 js 文件和一行 jQuery 代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
          $("body").fitText();
  });
</script>

参考Fittext

Answer 4

您可以使用视口大小的排版。

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

文本大小根据视口（浏览器的宽度和高度）而变化。

更多细节https://css-tricks.com/viewport-sized-typography

演示：https ://css-tricks.com/examples/ViewportTypography/

Answer 5

添加您自己的媒体查询以根据屏幕大小更改字体大小。看这里