Html 如何使间距相对于屏幕宽度？

我正在为一个网站编写代码，遇到了这样一个问题：我需要有与用户屏幕宽度相关的背景信息，但我不知道如何做到这一点

我尝试过使用相对单位和媒体查询，如下面代码所示。我也尝试过使用经典容器，它在一定程度上起作用，但随着页面变小，它最终会碰到浏览器窗口的边框。目标是在浏览器窗口的末端和“背景深白色”之间留出一个小的空白，这将与用户的页面宽度有关

绘画

画一幅艺术品。
工程

把零件组装在一起。
计算

写一个惊人的计算机程序。
广告

了解先进的广告策略。
服务

在全球范围内提供优质服务。
写作

写一本书，表达你自己。

以下是我所做的所有CSS修改：

。最短的{
最大宽度：100雷姆；
宽度：100%；
最大宽度：90rem；
}
.短内胎{
最大宽度：100雷姆；
宽度：100%；
最大宽度：76雷姆；
}
@仅介质屏幕和（最小宽度：1200px）{
.最短的{
最大宽度：100雷姆；
}
}
@仅介质屏幕和（最小宽度：992px）{
.最短的{
最大宽度：70雷姆；
}
}
@仅介质屏幕和（最小宽度：768px）{
.最短的{
最大宽度：50雷姆；
}
}
@仅介质屏幕和（最小宽度：600px）{
.最短的{
最大宽度：40雷姆；
}
}

---

我做错了什么？这与错误的媒体查询有关吗？谢谢所有帮助我的人

您使用的是与根元素的字体大小相关的

rem

。

%

是相对于父元素的，所以请记住这一点

如果您想获得“屏幕宽度大小”，可以使用

vw

（=Vievport-width），这将为您提供所述Vievport-width的1%

---

---

您可以在此处阅读更多内容：。

您是否有屏幕截图或图像来说明您想要的内容？我不确定我是否理解这些要求……是的，我尝试过使用大众汽车，但一开始它不起作用。我最近对代码做了一些调整，并对其进行了测试，它确实按计划工作。谢谢你的提醒，所以我又试了一次！