动态内联响应式 CSS 样式

Posted 2023-03-06

【中文标题】动态内联响应式 CSS 样式

【英文标题】：Responsive CSS styles inline on the fly

【发布时间】：2013-07-06 18:05:02

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

@media (max-width: 1100px) 
  * 
    color: var(--color-sm)
  

<a style="--color-sm: #11f">Text</a>

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

（颜色用于简单的展示，根据您的用例使用边距或任何其他 css 属性。）

【参考方案2】：

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

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

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

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

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

【讨论】：

谢谢 - 我可以在这里看到一个可能性 - 将测试它:)

【参考方案3】：

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

【讨论】：

请不要发布仅链接的答案。如果您认为这个问题是重复的，请标记它。