響應的CSS樣式內聯動態

我目前正在基於WordPress的CMS設計高度定位的網站。響應的CSS樣式內聯動態

目前我有一個響應主要樣式表外部鏈接的核心CSS。由於網站在很大程度上依賴於文本和圖像的間距和對齊方式，因此有必要使用style= HTML來添加內聯CSS，以便有時覆蓋外部CSS。

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

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

如果可以使用html風格進行內聯操作，那麼這會給我的客戶端更嚴格的控制和更大的靈活性。幸運的是，我的客戶非常熟悉CSS。

2013-07-09 Sideshow

你總是可以用一個風格元素添加CSS內聯的塊：

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

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

值得一提的是，HTML5已經推出了scoped屬性，你可以在風格元素設置爲指定樣式信息限制樣式元素的父元素以及該元素的後代。

目前尚未得到廣泛支持，所以不應該依賴它，但從長遠來看，它可能有助於防止這種內聯樣式「泄漏」到文檔的其他部分。

來源

2013-07-09 08:06:23

謝謝 - 我可以在這裏看到一個可能性 - 將測試它:) – Sideshow

此問題可能對您有所幫助（請仔細閱讀）使用@media根據設備寬度高度調整CSS屬性。 What does @media screen and (max-width: 1024px) mean in CSS?

來源

2013-07-09 08:14:30

請不要發佈鏈接的答案。如果您認爲此問題是重複的，請將其標記爲如此。 – Blazemonger

響應的CSS樣式內聯動態

回答

相關問題