css - 所有组件的 Angular 全局 css

Question

我有一个 html 文件和一个 css 文件，我想将其转换为 Angular 2 方式 => 将文档中的一些对象分离到不同的组件...所以我创建了一个 Angular 应用程序和组件，我不我不想更改我的全局 css 文件中的任何内容。

我正在尝试将我的“index.html”中的全局​​ css 应用到我所有的子组件，但似乎每个组件都使用相对于自身的 css。我的意思是，如果在我的“all.css”文件中有这些行:

.col-lg-3 {
   width: 25%;
}

在我的子组件中，25% 的宽度将相对于组件宽度而不是我文档的 宽度...这将导致我的组件占主体的 25%，但我组件的内部对象将占 25% 的 25%...

我该怎么办？

谢谢

编辑:

我试图实现的是每个 css 元素都将相对于文档的 标签而不是父元素......例如:我有 3 个组件:

应用程序 -> parent -> child

我希望 Child 的组件元素宽度百分比是相对于 App 组件而不是父组件...

Answer 1

由于没有提供代码，我不完全理解您要做什么。然而，根据您希望实现的目标，有许多解决方案。

(a) 您可以将 div 移到当前父级之外，也可以为内部 div 定义特定宽度。

(b) 如果您只需要始终根据主要内容区域获得内部 div 的宽度，则可以使用视口(viewport)宽度

.col-lg-3 {
   width: 25vw;
}

这会将宽度设置为视口(viewport)宽度的 25%

(c) 如果你需要在运行时动态改变宽度并且有特定的元素需要改变，你可以在Body加载后捕获视口(viewport)宽度并使用

改变内部div的宽度

document.getElementById('elementsId').style.width = 0.25 * window.innerWidth + 'px' //you can use screen.width also

(d) 使用 less.js 允许您在运行时动态更改 CSS 类。参见 http://lesscss.org/了解更多详情

在你的 less CSS 中添加这个

@myinnerWidth:25%
.col-lg-3 {
   width: @myinnerWidth
}

然后在您的 Controller 中动态更改 myinnerWidth

less.modifyVars({
  '@myInnerWidth': 0.25 * screen.width + 'px'
});