响应的CSS样式内联动态

我目前正在基于WordPress的CMS设计高度定位的网站。响应的CSS样式内联动态

目前我有一个响应主要样式表外部链接的核心CSS。由于网站在很大程度上依赖于文本和图像的间距和对齐方式，因此有必要使用style= HTML来添加内联CSS，以便有时覆盖外部CSS。

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

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

如果可以使用html风格进行内联操作，那么这会给我的客户端更严格的控制和更大的灵活性。幸运的是，我的客户非常熟悉CSS。

2013-07-09 Sideshow

你总是可以用一个风格元素添加CSS内联的块：

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

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

值得一提的是，HTML5已经推出了scoped属性，你可以在风格元素设置为指定样式信息限制样式元素的父元素以及该元素的后代。

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

来源

2013-07-09 08:06:23

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

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

来源

2013-07-09 08:14:30

请不要发布链接的答案。如果您认为此问题是重复的，请将其标记为如此。 – Blazemonger

响应的CSS样式内联动态

回答

相关问题