通过更改浏览器宽度来更改基于其原始值的字体大小答案

【问题标题】：Change the font-size based on its original value by changing the browser width通过更改浏览器宽度来更改基于其原始值的字体大小
【发布时间】：2014-08-17 18:56:14
【问题描述】：

当浏览器大小（宽度）介于两个特定数字之间时，我如何使用 jQuery、JS、CSS 来按百分比更改字体大小值。

例如

<div class="Fsize">Sample text<div>

<style>
//a sample size, lets say it can be anything
font-size: 100px;
</style>


<script>
//what should be here to change font-size to  for example 30% of its original value (100px), which is 30px. when browser size (width) is between 700px to 1000px.
</script>

我无法使用媒体媒体查询。下面是我使用它的示例。 CSS 中的百分比会根据body {font-size}而不是其原始值（此处为 250）更改字体大小。

<div class="font">Some Text</div>

<style>
.font {
   font-size: 250px;
  }


  @media (max-width: 600px) {  
.font {
    font-size: 100%;
  }
  }
</style>

【问题讨论】：

你不应该用javascript来做，使用media-queries的css
请阅读我的更新，有什么想法吗？
它改变了父元素的百分比值，所以你需要设置父元素原始值并改变子元素的百分比
这就是问题所在，由于某些原因我无法访问该问题。我有没有机会使用 JS 或 jQuery 来做到这一点？
是的，您可以获取元素字体大小并使用它进行操作。您可以通过$(window).on("resize", function () { ... }) 收听浏览器更改宽度

标签： javascript jquery html css font-size

【解决方案1】：

font-size 属性是相对于父元素的字体大小

http://www.w3.org/TR/css3-fonts/#font-size-prop

这意味着如果你想使用媒体查询通过百分比来改变字体大小，你需要先设置容器的相对字体大小。

.container{
  font-size:40px;
}

.font{
  font-size: 100%;
}

@media (min-width: 400px) and (max-width: 800px){  
  .font {
      font-size: 200%;

  }
}

http://jsbin.com/bisirojoquxa/1/

您可以使用容器，也可以在 body 元素中设置字体大小，然后从那里进行缩放。我建议使用基于 Sass 的响应式字体大小的解决方案，类似于此中包含的内容：

https://github.com/dmtintner/UtilityBelt

【讨论】：