Question

基本上我们在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>

我们可以做些什么来避免这些反应迟钝的内容搞砸了整个网页？

Answer 1

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

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

然而，其中许多样式实际上是在做某些事情，所以你应该编写一些响应式CSS来定位新发现的类，这些类都有合理的（如果不是语义）名称。

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

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

使用CSS演示小提琴：http://jsfiddle.net/5G374/1/

如何在响应式设计中阅读无响应的文本？

1 个答案: