使用CSS进行缩放

我正在尝试使用CSS创建Reddit页面。我的问题是缩放。我想做一个物体，.side，长度更小。在我的1080p显示器上，它看起来很棒，但当我放大或缩小它时，它将无法随浏览器缩放。它在手机上也太大了。 代码如下：

#header {
    background: url(%%rtv6a%%);
    background-repeat: no-repeat;
    background-position: -3px 24px;
    height: 130px;
}
#header-bottom-left
{
position: absolute;
bottom: 0;
}

div.side div.spacer:nth-of-type(5)
{
background:url(%%tangoglobe4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
}
div.side div.spacer:nth-of-type(5):hover
{
background:url(%%goglobal4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
transition: .6s;
}


body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer
{
background:url(%%whiteticks%%);
}
.sitetable
{
background:url(%%ticks%%);
}
.morelink .nub
{
display: none;
}
.sitetable
{
max-width: 83%;
border-color: #5C5C5C;
border-style:solid;
border-width:1px;
}

以下是我希望它看起来的样子： 当我缩放它时： 你会注意到灰色的盒子越来越远，父亲越来越远。我能做些什么来解决这个问题？

---

很抱歉，我不熟悉编码。

您可能需要查看媒体查询：

媒体查询查看设备的功能，并可用于 检查许多事项，例如：

• 浏览器窗口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向模式还是纵向模式？）
• 决议
• 还有更多

您可以使用媒体查询来设置CSS中文本或容器的大小和宽度，具体取决于浏览器的大小。例如：

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

---

提供了网站的链接，请访问www.reddit.com/r/tangoworldwide