[分享]css中如何设置文字自适应大小

在CSS中，我们可以利用一些属性来设置文字的自适应大小。下面我们来看看具体的操作：fontsize:xxsmall; //将文本设置为极小 fontsize:xsmall; //将文本设置为比较小 f...

在CSS中，我们可以利用一些属性来设置文字的自适应大小。下面我们来看看具体的操作：

font-size:xx-small;     //将文本设置为极小
font-size:x-small;      //将文本设置为比较小
font-size:small;        //将文本设置为小号
font-size:medium;       //将文本设置为正常显示大小
font-size:large;        //将文本设置为大号
font-size:x-large;      //将文本设置为比较大
font-size:xx-large;     //将文本设置为极大
font-size:100%;         //将文本设置为与父元素相同大小
font-size:0.8em;        //将文本设置为原来大小的0.8倍
font-size:1.2rem;       //将文本设置为根元素大小的1.2倍 

除了以上的属性设置外，我们也可以利用JavaScript来动态调整文字大小。比如，我们可以根据设备宽度自适应调整文字大小：

<script>
window.onload = function () {
  var width = document.documentElement.clientWidth;   //获取设备宽度
  document.getElementsByTagName('body')[0].style.fontSize = width / 20 + 'px';   //将根元素的字体大小设置为设备宽度的1/20
};
</script> 

除了根元素外，我们也可以利用媒体查询来设置不同尺寸的设备下文字的大小：

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 18px;
  }
} 

以上就是关于CSS中如何设置文字自适应大小的介绍，希望对大家有所帮助。