css中字体按屏幕缩放

CSS中利用@media查询可以根据屏幕不同的宽度来做出不同的响应式设计，对于字体而言也能实现按照屏幕缩放网页，这在做前端页面设计时极其重要。

首先，我们可以使用像素（px）作为字体大小单位，但是这种单位是绝对值，不具有自适应性，因此我们会遇到当屏幕尺寸变化时字体大小不随之变化而难以阅读的问题。

解决这个问题的方法就是使用相对单位来设置字体，比如说百分比（%），这个单位会根据父元素的大小进行缩放，与屏幕尺寸无关，但是由于不同屏幕的尺寸差异较大，会导致字体大小不同，影响页面展示效果。

p {
  font-size: 16px; /* 设置默认字体大小 */
}

@media (max-width: 1200px) {
  p {
    font-size: 14px; /* 屏幕宽度小于等于1200px时，字体大小设置为14px */
  }
}

@media (max-width: 992px) {
  p {
    font-size: 12px; /* 屏幕宽度小于等于992px时，字体大小设置为12px */
  }
}

@media (max-width: 768px) {
  p {
    font-size: 10px; /* 屏幕宽度小于等于768px时，字体大小设置为10px */
  }
} 

通常情况下，我们会设置至少三个断点，这样就能覆盖大多数设备，这也是响应式设计的基础。

总之，在进行前端页面的设计时，我们需要充分了解不同屏幕的尺寸，并通过css语法实现字体按照屏幕缩放，才能更好地为用户提供良好的浏览体验。