html网页缩小之后，部分样式乱掉，字体不会跟随网页缩放而改变大小。求解？

Question

今天闲来无事想模仿腾讯课堂敲个网页，结果敲到一半网页缩小时字体样式炸了。有部分字体变成了两排。图中可以看到，宽度我设置的是百分比。到底是啥原因？字体我用的rem,
另:如果是字体不会随着网页改变大小而造成样式乱掉的问题又该怎么解决pc端网页字体大小自适应的问题。
腾讯课堂的页面不管怎么缩小都不会炸，样式也不会乱掉？此处是我写的网页

----------------------------------------漂亮的分割线-------------------------------
此处是我腾讯课堂的网页

Answer 1

在html顶部加

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

字体会随页面的变化而变化