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引入了一个scoped属性，您可以在样式元素上设置该属性，以将指定的样式信息限制为样式元素的父元素，以及该元素的后代。

它还没有被广泛支持，所以不应该依赖它，但从长远来看它可能有助于防止像这样的内联样式“泄漏”到文档的其他部分。

Answer 2

这个问题/答案可能对您有所帮助（彻底阅读）使用@media根据设备宽度 - 高度调整css的属性。 What does @media screen and (max-width: 1024px) mean in CSS?

响应式CSS样式即时内联

2 个答案: