按语义缩小所有站点 UI

Question

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

我已经尝试了一些 css 方法，例如 zoom: 80%; 但这在 firefox 上不起作用，即使它正是我在 google 中测试它时所寻找的chrome.

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

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

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

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

默认值大多是16px

Answer 2

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 3

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

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

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

@largeMonitorBreakpoint:1000px;

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

按语义缩小所有站点 UI

Scale down all site in Semantic UI

html

css

semantic-ui