3

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

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

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

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

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

4

3 回答 3

2

你总是可以添加一个带有样式元素的 css 块：

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

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

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

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

于 2013-07-09T08:06:23.680 回答
0

这个问题/答案可能对您有帮助（彻底阅读）使用@media 根据设备宽度-高度调整您的 css 属性。 @media screen 和 (max-width: 1024px) 在 CSS 中是什么意思？

于 2013-07-09T08:14:30.157 回答
0

在现代浏览器中，您可以（某种程度上）使用自定义 css 属性（css 变量）来存档：

@media (max-width: 1100px) {
  * {
    color: var(--color-sm)
  }
}
<a style="--color-sm: #11f">Text</a>

（展开片段或全页打开以获取其他行为）

（使用颜色是为了简化演示，只需根据您的用例使用边距或任何其他 css 属性。）

于 2021-10-28T11:48:57.963 回答