Html 如何通过一次声明使字体大小响应不同大小的设备

面临字体大小设置问题。为了更好的可读性，我正在为不同的设备（如移动设备、平板电脑和超小型设备）更改字体大小。我的css正在增加，这对页面速度和优化也是致命的。我只想根据容器大小自动调整字体大小。 下面是我的示例代码，我正在为不同的设备和输出图像编写代码，以了解问题

.heading{font size:50px；}
@介质和全部（最小宽度：768px）和（最大宽度：800px）{
.标题{字体大小：40px；}
}
@介质和全部（最小宽度：400px）和（最大宽度：480px）{
.标题{字体大小：30px；}
}
@全部介质和（最小宽度：320px）和（最大宽度：375px）{
.标题{字体大小：20px；}
}

不同设备的字体大小问题

。标题{
字体大小：50px；
}
@介质（最大宽度：800px）{
.标题{
字体大小：40px；
}
}
@介质（最大宽度：480px）{
.标题{
字体大小：30px；
}
}
@介质（最大宽度：375px）{
.标题{
字体大小：20px；
}
}

---

不同设备的字体大小问题

对响应性网站使用

em

。

em

是一种可扩展单元，用于web文档媒体。em等于当前字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt

.heading{font size:1.6em；}
@介质（最大宽度：800px）{
.标题{字体大小：1.4；}
}
@介质（最大宽度：480px）{
.标题{字体大小：1.2em；}
}
@介质（最大宽度：375px）{
.标题{字体大小：1em；}
}

---

不同设备的字体大小问题

em可能是可伸缩的，但不会自动更改字体大小。因此，很遗憾，这并没有回答所提出的问题。

**.heading{font-size: 20vw;}
==============
@media (max-width: 800px){
  .heading{font-size: 16vw;}
}
==============
@media (max-width: 480px){
  .heading{font-size: 14vw;}
}
==============
@media (max-width: 375px){
 .heading{font-size: 12vw;}
}
==============
 - List item
# vw doest not support in safari browser #