我正在做一个学校项目: http: //lauralynn87.github.io/WSP/Project/index.html
我正在使用框架 Bootstrap 3.0 - 几乎所有内容都是响应式的,但文本。
我已经尝试使用百分比和 ems 字体大小..但没有任何效果。我知道我错过了一些东西,但无法弄清楚。
任何帮助表示赞赏。
谢谢。
我正在做一个学校项目: http: //lauralynn87.github.io/WSP/Project/index.html
我正在使用框架 Bootstrap 3.0 - 几乎所有内容都是响应式的,但文本。
我已经尝试使用百分比和 ems 字体大小..但没有任何效果。我知道我错过了一些东西,但无法弄清楚。
任何帮助表示赞赏。
谢谢。
%
如果您使用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 */
}
}
这些数字当然只是示例。
这是仅使用 Bootstrap 设备大小的屏幕的移动优先 css 片段。注释:
.
/* 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 字体大小,而不是如上所示的正文。
我建议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
您可以使用视口大小的排版。
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
文本大小根据视口(浏览器的宽度和高度)而变化。
添加您自己的媒体查询以根据屏幕大小更改字体大小。看这里