css - 响应式 CSS 样式即时内联

Question

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

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

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

到目前为止，我能想到的唯一方法是通过 jQuery 根据用户屏幕宽度修改外部 CSS，但这意味着在 JS 中设置严格的规则，例如:桌面 View 的边距设置为 70% 和对于移动设备，将它们设置为 90%。

如果可以使用 html 样式内联执行此操作，那么这将为我的客户提供更严格的控制和更大的灵 active 。幸运的是，我的客户精通 CSS。

Answer 1

您总是可以添加一个内联样式元素的 css block :

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

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

值得一提的是，HTML5 引入了一个 scoped您可以在样式元素上设置的属性，以将指定的样式信息限制为样式元素的父元素和该元素的后代。

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