使用 Bootstrap，但文本没有响应 [英] Using Bootstrap, but Text not Responsive

问题描述

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

I am working on a school project : http://lauralynn87.github.io/WSP/Project/index.html

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

and I am using the framework Bootstrap 3.0 - and almost everything is responsive, but the text.

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

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 等，字体没有响应

Fonts are not responsive if you use % or em etc.

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

If you want to change the size of your font on different screen/window sizes, you have to use media queries in 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，但文本没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！