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

Semantic UI使用Gulp编译CSS和Javascript以在项目中使用。您需要更改基本字体大小以使组件更小。问题是，您需要在编译之前覆盖此值。我担心这就是为什么Barry127的解决方案无法按预期工作的原因，因为此时已经计算了几个组件的大小。

更改{theme}/globals/site.variables中的基本尺寸：

/*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ @emSize : 14px; /* The size of page text */ @fontSize : 14px;

现在通过运行gulp build来编译所有内容。如果您不想使用Semantic UI附带的构建工具，请使用您自己的（自定义）gulp函数。详细了解主题here。

永远不要升级或缩小整个文档，这不是一个好习惯。还有一些浏览器不支持transform属性。此外，这可能会导致文本和边框显得模糊。

Answer 2

我认为Semantic UI使用所有元素的相对大小，因此像这样设置font-size应该可以解决问题：

html, body {
    font-size: 14px;
}

默认值大多为16px

Answer 3

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

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

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

@largeMonitorBreakpoint:1000px;

这样我保证大型监视器的断点是1000px而不是1200px，因此容器的宽度基于此值，因此每个容器最多需要935px。

缩小语义UI中的所有站点

3 个答案: