html：调整文本大小以保持与图像的比例相同

Question

我们有一个网站，在其中一个部分我们可以添加要显示的图像和文本。当我们看到笔记本电脑中具有更高分辨率的网站时，一切看起来都不错，但手机中的同一页面显示的方式是图像调整大小以适应屏幕但文字大小不适合。（文字大于图像） 。我该如何解决？

桌面和智能手机中的

：

Answer 1

如果您想在较小的屏幕上使用较小的字体，请使用vw（视口宽度）单位。例如：

body {
  font-size: 4vw;
}

jsfiddle

Answer 2

正如freestock.tk所说，您可以使用vw单位使用浏览器视口宽度的字体比例。

但是，我建议使用media queries来设置字体大小，因为这可以确保您的文字不会太大或太小。

示例：

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

@media screen and (min-width: 500px) and (max-width: 999px) {
  body {
    font-size: 24px;
  }
}

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

在上面的示例中，如果视口宽度至少为1000px，则字体将设置为32px。如果它位于500px和999px之间的任何位置，则会将其设置为24px。任何小于499px的内容都会18px。

查看此Fiddle。调整结果窗口的宽度以查看效果。