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

Question

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

.heading{font-size: 50px;}

@media all and (min-width: 768px) and (max-width: 800px){
  .heading{font-size: 40px;}
}

@media all and (min-width: 400px) and (max-width: 480px){
  .heading{font-size: 30px;}
}

@media all and (min-width: 320px) and (max-width: 375px){
 .heading{font-size: 20px;}
}

<h1 class="heading">Font size issue for different devices</h1>

Answer 1

.heading {
  font-size: 50px;
}

@media (max-width: 800px) {
  .heading {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .heading {
    font-size: 30px;
  }
}

@media (max-width: 375px) {
  .heading {
    font-size: 20px;
  }
}

<h1 class="heading">Font size issue for different devices</h1>

使用媒体查询时，仅使用@media（参数）或使用

.heading{font-size: 100%;}

Answer 2

newSubMenuItem = new MenuItem(c1.Text);
newSubMenuItem.NavigateUrl = ci.NavigateUrl;

Answer 3

将em用于响应式网站。 em是一个可扩展的单元，用于Web文档媒体。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt

.heading{font-size: 1.6em;}

@media (max-width: 800px){
  .heading{font-size: 1.4;}
}

@media (max-width: 480px){
  .heading{font-size: 1.2em;}
}

@media (max-width: 375px){
 .heading{font-size: 1em;}
}

<h1 class="heading">Font size issue for different devices</h1>