所有組件的角度全局CSS

Question

我有一個HTML文件和一個CSS文件，我想將其轉換為有角度的2種方式=>將文檔中的某些對象分離為不同的組件...所以我創建了有角度的應用程序和組件，但我不想更改我的全局css文件中的任何內容。

我正在嘗試將“ index.html”中的全局css應用於所有子組件，但似乎每個組件都使用相對於其自身的css。例如，我的意思是如果在我的“ all.css”文件中我有這些行：

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

在我的子組件中，25％的寬度將相對於組件的寬度，而不是文檔的<body>寬度...這將“導致我的組件占主體的25％，但是組件的內部對象將是25％中的25％...

我該怎么辦？

謝謝

編輯：

我試圖實現的是每個css元素都相對於文檔的<body>標記而不是父元素...例如：我有3個組件：

應用->父->子

我希望孩子的組件元素寬度百分比相對於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）使用less.js，它允許您在運行時動態更改CSS類。 有關更多詳細信息，請參見http://lesscss.org/

在較少的CSS中添加此

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

然后在您的控制器中動態更改myinnerWidth

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