如何通过响应式设计阅读无响应的文本？答案

【问题标题】：How can I read an unreponsive text over a responsive design?如何通过响应式设计阅读无响应的文本？
【发布时间】：2014-04-12 16:04:07
【问题描述】：

基本上，我们有所谓的 HTML 响应式设计，但通过我们的网页提供的真实内容的一部分来自一个带有产品描述的非常大的数据库，是使用 Dreamweaver 制作的。因此它的 html 是这样的：

<div style="width: 950px; float: left;">
<div style="width: 20px; float: left;">&nbsp;</div>
<div style="width: 910px; float: left; color: #37444D; padding-top: 20px; font-size: 18px;">...</div>
</div>

我们可以做些什么来避免这种无响应的内容搞砸整个网页？

【问题讨论】：

从数据库中的数据中剥离演示数据似乎是一个很好的起点。
@Quentin 你的意思是剥离 html 标签？（还有图片和列表...）
只是展示性的标签和属性。保留那些用于结构和语义的。（当现有结构仅通过演示隐含时，添加新的结构/语义元素）。
恐怕我们不能这样做，因为这可能意味着删除宽度并在每个元素上浮动。如果我们这样做，那会破坏图形：s @Quentin
什么图形？你不必打破任何东西。将内联 CSS 移动到外部样式表。一切都保持不变，但现在您可以控制样式并可以更改它们以获得响应式视图。

标签： html css web responsive-design

【解决方案1】：

这是一个非常常见的现实问题。在理想情况下，演示文稿和内容应该是分开的，但这里听起来有太多遗留数据需要手动清理。

在这种情况下，我建议使用 Javascript 将内联样式替换为相关的类名。这将做的第一件事是删除所有固定宽度，因此您将拥有适合您的响应式设计的东西。

但是，这些样式中的许多实际上都在做一些事情，因此您应该编写一些响应式 CSS 来定位您新发现的类，这些类都将具有合理（如果不是语义）名称。 p>

如果您的网站运行 jQuery，则代码可以很简单：

$("div").each(function() {
    var w = $(this).width();
    $(this).addClass("width" + w);
    $(this).removeAttr("style");
});

使用 CSS 的演示：http://jsfiddle.net/5G374/1/

【讨论】：