twitter-bootstrap 使用 Bootstrap，但文本没有响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19070463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Bootstrap, but Text not Responsive
提问by user2800027
I am working on a school project : http://lauralynn87.github.io/WSP/Project/index.html
我正在做一个学校项目：http: //lauralynn87.github.io/WSP/Project/index.html
and I am using the framework Bootstrap 3.0 - and almost everything is responsive, but the text.
我正在使用框架 Bootstrap 3.0 - 几乎所有东西都是响应式的，但文本。
I've tried using percentages and ems for font sizes..but nothing is working. I know I'm missing something, but can't figure it out.
我试过使用百分比和 em 作为字体大小......但没有任何效果。我知道我错过了一些东西，但无法弄清楚。
Any help is appreciated.
任何帮助表示赞赏。
Thanks.
谢谢。
回答by Felix G.
Fonts are not responsive if you use %or emetc.
如果您使用%或em等，字体没有响应。
If you want to change the size of your font on different screen/window sizes, you have to use media queries in CSS.
如果要在不同的屏幕/窗口大小上更改字体大小，则必须在 CSS 中使用媒体查询。
For example:
例如：
@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 */
}
}
The numbers are of course only examples.
这些数字当然只是示例。
回答by Steve Tarver
Here is a mobile first css snippet for screen only using Bootstrap device sizes. Comments:
这是仅使用 Bootstrap 设备大小的屏幕移动优先 css 片段。评论：
- Bootstrap does not scale typography in response to display size changes.
- Do you really want the same font size on a 27" monitor as a smart phone? I see several good designs where different font sizes for different screens make sense. Testing will prove your design right or wrong.
- Do you really want screen and print font sizes to be the same? Screen and print are different beasts. If you care about printing, you should test it separately.
- The font scaling I use below is arbitrary - no magic there.
- 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;
}
}
A jsfiddle that shows the effects: https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/. Note that the media queries are only changing th, td font sizes, not body as shown above.
显示效果的 jsfiddle：https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/ 。请注意，媒体查询仅更改 th、td 字体大小，而不是如上所示的正文。
回答by Syed Fazle Rahman
I would suggest Fittext jQuery pluginto make all the text responsive by default. It requires only 2 js files and a single line of jQuery code.
我建议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>
Refer Fittext
参考Fittext
回答by Eissa
you can use Viewport Sized Typography.
您可以使用视口大小的排版。
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
the text size changes according to the view port (browser's width and height).
文本大小根据视口（浏览器的宽度和高度）而变化。
more details https://css-tricks.com/viewport-sized-typography
更多细节https://css-tricks.com/viewport-sized-typography
