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

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

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

在html顶部加

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

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

首先，我想问问你rem的根目录html的字体你有用@media做自适应大小变化吗？其次我想问你这个乱掉的样式的宽度是不是用百分比来弄的？如果是，那页面缩小了，宽度不足够时自然是要掉下来的，我觉得像这种可以固定宽度的，你可以给个min-width来设置它的最小宽度

在html顶部加
字体会随页面的变化而变化

将定位改为：

position:relative;

就可以了！

你这个要去学css弹性布局

是不是绝对定位的问题？position=“absolute”，改成相对定位或者浮动定位试试

建议页面固定宽度，字体用rem