移动设备的CSS字体大小

Question

我已经完成了简单的页面,似乎对不同大小的屏幕反应良好.我没有做任何想要实现这一点的事情 - 只是避免固定尺寸等.

但是,一个页面有一个大字体的单个单词:

在此输入图像描述

当我调整浏览器大小时,所有其他内容都会正确显示,但标题词当然不会中断:

在此输入图像描述

处理这个问题的正确方法是什么？有没有办法根据屏幕宽度调整字体大小？

Answer 1

另一种选择是使用视口百分比长度.

vw单位:等于初始包含块宽度的1%.

你可以在CSS Tricks上阅读更多关于它的内容,它讨论了某些浏览器的重绘bug,但你可以用一点jQuery来解决它.

h1 {
    font-size: 25vw;
}

Answer 2

您可以使用媒体查询，例如：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
   body {
    background: #ccc;
  }
}