Question

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

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

我尝试过使用百分比和ems来表示字体大小..但没有任何效果。我知道我错过了什么，但无法弄清楚。

感谢任何帮助。

感谢。

Answer 1

如果您使用%或em等

，则字体无法响应

如果要在不同的屏幕/窗口大小上更改字体大小，则必须在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

添加您自己的媒体查询，根据屏幕大小更改字体大小。见here

使用Bootstrap，但Text不响应

4 个答案: