html - 缩小语义 UI 中的所有站点

Question

我有一个语义 ui 网站，我需要缩小它，它似乎放大得太大了。我希望一切都按比例缩小，从字体到容器和段。

我尝试了一些 css 方法，例如 zoom: 80%; 但这在 firefox 上不起作用，尽管这正是我在 google chrome 中测试它时所寻找的。 p>

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

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

这种方法的问题是页眉和页脚原本应该有 100% 的宽度不再有效。

是否有一种语义 ui 方法可以做到这一点？我已经使用 site.variables 来更改一些预定义颜色变量的颜色，但我不知道我是否可以这样做来更改事物的默认大小，按比例减少每个元素的 px 或 em。

是否有 CSS 或语义 UI 方法可以做到这一点？

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

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

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

是否有更好的方法来做到这一点，而不是针对所有宽度规范否决所有与尺寸相关的样式？当我在宽度接近但高于 1200 的屏幕中打开网站时，我发现该网站太大。

Answer 1

语义 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 编译所有内容。如果您不想使用语义 UI 附带的构建工具，请使用您自己的(自定义)gulp 函数。阅读有关主题的更多信息 here .

切勿放大或缩小整个文档，这不是一个好习惯。仍然有一些浏览器不支持 transform 属性。此外，这可能会导致文本和边框显得模糊。