缩小语义UI中的所有站点

Question

我有一个语义ui网站,我需要缩小,它似乎都放大了.我希望一切都按比例缩小,从字体到容器和细分.

我已经尝试了一些css方法,zoom: 80%;但这对firefox不起作用,即使它正是我在谷歌浏览器中测试时所寻找的.

然后我尝试使用变换比例:

html {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8); 
    transform: scale(0.8);
}

这种方法的问题是,应该具有100%宽度的页眉和页脚不再存在.

有这样的语义方式吗？我已经使用site.variables来改变某些预定义颜色变量的颜色,但我不知道我是否可以改变事物的默认大小,按比例减少每个元素的px或em.

是否有CSS或语义UI方式这样做？

更新:
例如,当使用我的分辨率打开网站时,段的宽度为1135px,当分辨率高于1200px时由媒体css应用.我希望这个宽度要么仅适用于1300或1400px以上的分辨率,要么将分段的宽度设置为1000px,分辨率为1200px.但是我希望以标准方式为所有组件设置,而不是需要为所有元素编写自定义css以覆盖默认行为.

这是应用于每个容器的当前样式:

@media only screen and (min-width: 1200px)
.ui.container {
    width: 1135px;
    margin-left: auto !important;
    margin-right: auto !important;
}

对于所有宽度规格,有没有更好的方法来做到这一点,而不是推翻每种尺寸相关的风格？当我在宽度接近但高于1200的屏幕上打开它时,我发现网站太大了.

Answer 1

我找到了解决方案，因此我与观众分享，以防其他人偶然发现这个问题。

我不想简单地覆盖 CSS 规则，因为这似乎很难维护，所以我想以标准语义 ui 方式完成它。

我最终更改了src/site/elements/container.variables, 并更改了大显示器的默认宽度，默认为 1200px：

@largeMonitorBreakpoint:1000px;

这样我保证大显示器的断点是1000px而不是1200px，因此容器的宽度基于这个值，所以每个容器最多占用935px。