调整浏览器大小时如何缩小字体大小

Question

我正在建立一个html5和css的网站.我试图使这个网站响应,但我不知道为什么当我调整浏览器窗口大小时,字体的大小保持不变,即使我正在使用em或percentages,如:font-size: XXem或font-size: XX%.

如何使字体可调整大小？

Answer 1

对于HTML5网页,我强烈建议使用Viewpoint Width/Height值.它们的功能类似于%,但是随窗口调整大小的字体大小.

例如...

.some-paragraph{
    font-size: 5vw;
}

这会将font-size设置为当前视口宽度的5%,即使在重新调整大小时也是如此!

在此处了解更多信息:http://www.w3.org/TR/css3-values/#viewport-relative-lengths

注意:您可能需要考虑到这一点:

 <meta name="viewport" content="initial-scale=1">

Answer 2

它被称为响应

@media screen and (max-width: 1024px) {
your font  style goes here

}

@media screen and (max-width: 950px) {
 your font  style goes here

}


@media screen and (max-width: 650px) {
 your font  style goes here


}

@media screen and (max-width: 480px) {
 your font  style goes here

}

Answer 3

检查您的媒体查询，如果您使用响应式技术，它们应该控制您的字体大小。

代码示例会有所帮助。

给雷姆一个机会。比 % 或 em 效果更好。

http://snook.ca/archives/html_and_css/font-size-with-rem