css屏幕变小字体自动变小

随着移动设备的普及，越来越多的网站需要在小屏幕上展示。为了让用户体验更好，我们需要考虑针对小屏幕做一些优化。其中之一是字体的大小，我们需要让字体在变小的同时保持可读性。

@media only screen and (max-width: 768px) {
  body {
        font-size: 14px;
  }
}

上面的代码中，我们使用媒体查询检测屏幕宽度是否小于768像素，如果是，则将整个页面的字体大小调整为14像素。当用户在不同的设备上浏览网站时，字体大小会自动适应屏幕大小。

我们也可以使用相对单位（如em或rem）来设置字体大小，这样字体大小会根据浏览器设置或用户设备的屏幕大小来自动调整。

body {
      font-size: 1em;
}
@media only screen and (max-width: 768px) {
  body {
        font-size: 0.875em;
  }
}
    

上面的代码中，我们将整个页面的字体大小设置为1em，当屏幕宽度小于768像素时，将字体大小调整为0.875em，以自动适应小屏幕。

综上所述，通过使用媒体查询和相对单位，我们可以轻松地实现在小屏幕上字体自动变小的效果，以提升用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！