所有组件的角度全局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 个组件：

应用程序-> 家长 -> 孩子

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

Answer 1

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

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

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

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

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

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

改变内部 div 的宽度

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

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

在你的 less CSS 中添加这个

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

然后在您的控制器中动态更改 myinnerWidth

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