Question

我正在制作一个包含html5和css的网站。我正在努力使这个网站响应，但我不知道为什么当我调整浏览器窗口大小时字体的大小保持不变，即使我正在使用em或percentage这样的as：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

Answer 4

你绝对应该根据一系列的屏幕比例和规格使用CSS media queries来设置样式，但这里有一个使用rem单位和jQuery来缩小浏览器宽度时缩小字体的示例。 Fiddle here

CSS

html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }

的JavaScript / jQuery的

$(document).ready(function () {
    var holdWidth = $(window).width();
    $(window).on('resize', function () {
        newPercentage = (($(window).width() / holdWidth) * 100) + "%";
        $("html").css("font-size", newPercentage)
    });
});

和here's an example平均新字体大小百分比的宽度和高度：

$(document).ready(function () {
    var holdWidth = $(window).width();
    var holdHeight = $(window).height();
    var holdAverageSize = (holdWidth + holdHeight) / 2;
    $(window).on('resize', function () {
        newAverageSize = ($(window).width() + $(window).height()) / 2;
        newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
        $("html").css("font-size", newPercentage)
        console.log(newPercentage);
    });
});

Answer 5

.text {
    font-size: 50px;
}


@media only screen 
and (min-width : 300px)
and (max-width : 500px) {

   .text {
    font-size: 20px;
   }

}

    @media only screen 
    and (min-width : 500px)
    and (max-width : 800px) {

       .text {
        font-size: 30px;
       }

    }

</style>


<div class="text">Test Text</div>

Answer 6

您可以使用@media查询和css中的视口来解决此问题，并将此元标记添加到您的html中：

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

使用@media查询和视口，您可以使用css中的媒体查询+视口声明每个屏幕宽度的大小：

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

            // your css for screens between 820 and 920 pixels in width goes here

  }

我主要使用的值是：从20 - 600,600-700,700-820,820 - 920,920 - 1200，@ media screen和（min-width：1200px）{@ viewport {width ：1200px; }（最后一个将设置任何大于1200像素宽度的屏幕的大小，所以你的代码最大的版本在这里进行}

因此，这意味着您的css代码将被调整为适应大小的6倍。

这称为自适应或响应式设计，非常容易实现

有关详细信息，请查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 7

这可能会有所帮助。根据窗口大小响应调整文本大小，但保持足够大，以便移动兼容 http://typecast.com/blog/a-more-modern-scale-for-web-typography

Answer 8

如何指定基线字体大小（针对CSS文件中的html或body标签）？如果您将此值设置为像素（或其他固定度量）或继承浏览器默认字体大小，则您的百分比或值将始终为这些默认值的百分比。

构建自适应网站的最常用方法是执行“移动优先”方法，即默认样式表在小屏幕上处理网站的基本样式，然后使用CSS中的媒体查询将样式调整为屏幕大小增加。您目前使用的是任何媒体查询/断点吗？

Answer 9

font-size：25vmin;

这是非常好的高度和宽度调整字体。
你不需要任何东西。

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

9 个答案: