动态内嵌响应式 CSS 样式

Question

我目前正在开发一个基于 WordPress CMS 的高度设计导向的网站。

目前，我有一个响应式主样式表，从外部链接到核心 CSS。由于网站严重依赖文本和图像的间距和对齐方式，因此有必要使用style=HTML 添加内联 css，有时会覆盖外部 CSS。

我遇到的问题是，在大多数情况下，某些元素（例如边距）在移动视图中需要与桌面视图中的百分比不同，以平衡视觉构成。有什么方法可以responsiveness像在外部样式表中那样根据屏幕宽度添加到内联 CSS 中吗？

到目前为止，我能想到实现这一目标的唯一方法是通过 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 元素的父元素以及该元素的后代。

它尚未得到广泛支持，因此不应依赖它，但从长远来看，它可能很有用，有助于防止此类内联样式“泄漏”到文档的其他部分。