Javascript 根据屏幕大小调整文本大小

我的html中有不同的元素，具有不同的文本大小。我想将它们设置为动态的，这样它就可以为不同的屏幕大小显示不同的字体大小

最好的办法是什么？ 现在我是这样做的，但这会让代码看起来很难看：

<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');

$（窗口）。调整大小（函数（）{
$（'#first'）.css（'font-size'，（$（window.width（）*0.2）+'px'）；
$（'h2'）.css（'font-size'，（$（window.width（）*0.02）+'px'）；
$（'h1'）.css（'font-size'，（$（window.width（）*0.03）+'px'）；

对于两个元素来说，这是可以的，但是我有更多的元素。我对html/css/javascript没有太多的经验，所以这就是我想到的

因为我正在学习，我想知道什么是最好的方法

---

也许您有一些改进的建议？

放弃javascript来更改字体大小…在css文件中指定em字体大小，如下所示

div{
   font-size:2em;
}

---

使用

em

，而不是使用像素，因为它将相应地缩放

来自维基百科：

在线上，em度量的使用变得越来越普遍；随着层叠样式表（或CSS）的开发，HTML和在线标记中的W3C最佳实践建议现在要求网页基于可伸缩设计，使用相对的度量单位（如em度量），而不是像像素（“px”）或点这样的固定值

---

不要使用javascript指定字体大小。CSS内置了相应的方法

您可以将“em”或“%”与字体大小一起使用，以更改与页面和设备维度相关的字体大小

代码示例：

font-size: 3em;
font-size: 10%;

两者都可以。

如果有帮助的话，试试这个（如果你想使用javascript）

---

如果您在

%

或

em

基础上进行设置，浏览器将相应地设置其字体大小。

使用媒体在css文件中设置字体大小

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:768px) {
    body {
        font-size: 11px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 12px;
    };
}

@media(min-width:1200px) {
    body {
        font-size: 13px;
    };
}

---

您可以通过css媒体查询来实现这一点

在媒体查询中，按百分比设置正文大小

例如：css

@media screen and (max-width: 1024px) {
   body {
      font-size: 90%;
   }
}

@media screen and (max-width: 1440px) {
   body {
      font-size: 100%;
   }
}

然后，在调整浏览器大小时，或根据分辨率（以百分比为单位），为每个要调整字体大小的元素设置字体大小

如果你想在h1上调整字体大小

h1 {
   font-size: 150%;
}

---

它将按照您的意愿工作。

使用JavaScript调整字体大小不是一个好做法。最好使用CSS进行调整。您可以使用不同的单位（如px、em和%以及rem（根em））在CSS中调整字体大小

要根据屏幕大小调整字体大小，请在rem中设置字体大小。或者使用媒体查询为不同的屏幕分辨率设置字体大小。以下是一些媒体查询示例：

@media screen and (max-width: 1024px) {
    #first { font-size: 204px; }
    h2 { font-size: 20px; }
    h1 { font-size: 30px; }
}

---

您可以使用新的css单位vw、vh（视口宽度/高度）来实现此目的

这里有一个有趣的例子，告诉你如何使用它们进行排版

示例：（来自上述文章）

所以h1的字体大小是视口宽度的5.9%，等等

---

也就是说，以上述方式使用

字体大小的视口单位是有问题的，因为当视口宽度非常窄时，渲染的字体大小将变得太小，反之亦然

为了克服这个问题，我可以推荐使用一种叫做AKA的技术

CSS锁是一种特定类型的CSS值计算，其中：


有一个最小值和一个最大值
和两个断点（通常基于视口宽度）
在这些断点之间，实际值从最小值到最大值呈线性变化

（这也非常详细地解释了所涉及的数学问题。）

假设我们要应用上述技术，使最小字体大小在600px或更小的视口宽度下为16px，并线性增加，直到在1200px的视口宽度下达到最大32px

我们可以使用它为我们做所有的数学运算，这样CSS看起来像这样：

div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}


//----
//libsass（v3.3.6）
// ----
// =========================================================================
//
//对SASS响应性排版的精确控制
//  ---------------------------------------------------
//Indrek Paas@indrekpaas
//
//灵感来源于Mike Riethmuller对响应性排版的精确控制
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//雨果·吉拉德尔的'strip-unit（）'函数
//  
//2016年8月11日删除冗余的`&`自参考
//2016年3月31日从输出中删除冗余括号
//2015年10月2日添加对多个属性的支持
//2015年4月24日首次发布
//
// =========================================================================
@功能条单位（$value）{
@返回$value/（$value*0+1）；
}
@混合液类型（$properties、$min-vw、$max-vw、$min-value、$max-value）{
@$properties中的每个$properties{
#{$property}:$min值；
}
@媒体屏幕和（最小宽度：$min vw）{
@$properties中的每个$properties{
#{$property}:calc（{$min value}+{条带单位（$max value-$min value）}*（100vw-{$min vw}）/{条带单位（$max vw-$min vw）}）；
}
}
@媒体屏幕和屏幕（最小宽度：$max vw）{
@$properties中的每个$properties{
#{$property}:$max value；
}
}
}
//用法：
// ======
///*单一物业*/
//html{
//@包括流体类型（字体大小，320px，1366px，14px，18px）；
// }
///*具有相同值的多个属性*/
//h1{
//@包括流体类型（填料底部填料顶部、20em、70em、2em、4em）；
// }
////////////////////////////////////////////////////////////////////////////
div{
@包括流体类型（字体大小，600px，1200px，16px，32px）；
}
@媒体屏幕和屏幕（最大宽度：600px）{
div{
字体大小：16px；
}
}
@媒体屏幕和屏幕（最小宽度：1200px）{
div{
字体大小：36px；
}
}
响应式排版技术，称为流体类型或CSS锁。
调整浏览器窗口的大小以查看效果。
您可以使用div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}