動態內嵌響應式 CSS 樣式

Question

我目前正在開發一個基於 wordpress CMS 的高度設計導向的網站。

目前，我有一個外部鏈接的響應式主樣式表，用於核心 css。 由於該站點嚴重依賴文本和圖像的間距和對齊方式，因此有必要使用style= HTML 添加內聯 css 有時會覆蓋外部 CSS。

我遇到的問題是，在大多數情況下，某些元素（例如邊距）在移動視圖中需要與桌面視圖中的百分比不同，以平衡視覺組合。 有什么方法可以像在外部樣式表中那樣根據屏幕寬度向內聯 CSS 添加responsiveness ？

到目前為止，我能想到的唯一方法是通過 jQuery 根據用戶屏幕寬度修改外部 CSS，但這意味着在 JS 中設置嚴格的規則，例如：對於將邊距設置為 70% 的桌面視圖和移動設置他們達到 90%。

如果可以使用 html 樣式內聯執行此操作，那么這將為我的客戶提供更嚴格的控制和更大的靈活性。 幸運的是，我的客戶精通 CSS。

Answer 1

您總是可以添加一個內聯CSS塊的樣式元素：

<style type="text/css">
@media screen and (min-width:800px) {
   .inlineOverride {
     /* add more styles here */
   }       
}    
</style>

<div class="inlineOverride">
</div>

值得一提的是，HTML5引入了一個范圍限定的屬性，您可以在style元素上設置該屬性，以將指定的樣式信息限制為style元素的父元素以及該元素的后代。

它尚未得到廣泛支持，因此不應該依賴它，但是從長遠來看，它有助於防止這種內聯樣式“滲入”文檔的其他部分。

Answer 2

這個問題/答案可能對您有所幫助（請仔細閱讀），請使用@media根據設備的width-height來調整css的屬性。 @media屏幕和（最大寬度：1024像素）在CSS中是什么意思？

Answer 3

在現代瀏覽器中，您可以（有點）使用自定義 css 屬性（css 變量）將其存檔：

 @media (max-width: 1100px) { * { color: var(--color-sm) } }

 <a style="--color-sm: #11f">Text</a>

（展開 Snippet 或全頁打開以獲取其他行為）

（顏色用於簡化演示，只需根據您的用例使用邊距或任何其他 css 屬性。）