13

我做了一些网络应用程序，但font-size有一些问题。如何根据CSS3 或 javascript 中窗口的更改大小按比例更改字体大小？

4

5 回答 5

29

理想的方法是使用单位，它被定义为视口宽度vw的 1/100 （因此得名）。因此，例如，如果您希望文本始终占浏览器宽度的 4.5%，则可以使用以下大小：

font-size: 4.5vw;

......从理论上讲，这应该有效。不幸的是，您会发现它并没有按预期工作：WebKit 浏览器（至少）存在一个错误，其中字体大小的值不是实时更新的（尽管它适用于所有其他尺寸）。您需要触发重绘以更改字体大小，这可以通过z-index从 JavaScript 更新属性来完成：

window.addEventListener('resize', function(){
    document.getElementById('myEl').style.zIndex = '1';
}, false);

这可能会造成一点混乱，但这意味着您不必在 JavaScript 中计算任何实际尺寸，也不需要像媒体查询那样使用“阶梯式”尺寸。

于 2013-05-05T17:02:58.423 回答
10

这样做的理想方法是结合大众字体大小和@media 查询。原因是：

1) em 本身不会按窗口大小重新缩放

2) 对于低于 800 像素的分辨率/屏幕，vm 本身会太小。

因此，实现这一目标的正确方法是：

  • 为所需的屏幕宽度定义一个类 - 带有 VM=1.0 的 prop-text
  • 添加媒体查询以使字体大小与所需的较低分辨率网格相匹配。

对于我的响应式网格（将 1/2 列设置为 100% 宽度低于 768px 宽度），它看起来像这样：

<style>
    .prop-text{font-size:1.0vw}
    @media (max-width : 768px) {
    .prop-text{font-size:2.0vw}
    }
    /*other media queries here - fit font size to smartphone resolutions */
</style>

<div class="prop-text">your text is here</div>
于 2014-09-11T06:08:50.347 回答
7

body设置你的基本字体大小（你在css中为你的元素定义的那个）px然后在你页面的其余部分设置字体大小相对于那个使用em单位，然后你可以使用媒体查询来更改所有页面的字体大小只需更改您的基本字体，如下所示：

body {
  font-size: 15px;
}
@media (max-width: 1000px) {
  body { font-size: 1.3em; }
}
@media (max-width: 500px) {
  body { font-size: 1.1; }
}
于 2013-05-05T14:39:00.187 回答
6

你有 3 种方法来做到这一点：

  1. 使用http://fittextjs.com/，但页面可能开始变慢
  2. 使用媒体查询
  3. 使用 em

现在，这取决于您想要成为最终结果。我会选择第 3 个选项。

于 2013-05-05T17:09:00.497 回答
0

我认为最好的方法可能是vh，因为font-size会改变文本的高度。使用vh意味着文本总是会混淆页面的大小，即使用户调整页面大小或屏幕很小。

于 2019-12-28T17:49:40.473 回答