使用 CSS 缩放答案

【问题标题】：Scaling with CSS使用 CSS 缩放
【发布时间】：2015-04-24 09:22:42
【问题描述】：

我正在尝试使用 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;
}

这是我想要的样子：http://i.imgur.com/CM1Ejgp.jpg 当我缩放它时：http://i.imgur.com/HGsnSvD.png 你会注意到灰色的盒子越来越远，父亲也越来越远。我能做些什么来解决这个问题？抱歉，我是编码新手。

【问题讨论】：

请提供网站链接
www.reddit.com/r/tangoworldwide

标签： css scale reddit

【解决方案1】：

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

媒体查询着眼于设备的能力，可用于检查很多东西，例如：

浏览器窗口的宽度和高度

设备的宽度和高度

方向（平板电脑/手机是横向还是纵向？）

分辨率

等等

您可以使用媒体查询根据浏览器的大小在 CSS 中设置文本或容器的大小和宽度。例如：

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

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：