基本上我们在 HTML 中拥有所谓的响应式设计,但通过我们的网页提供的真实内容的一部分来自一个非常大的产品描述数据库,是用 Dreamweaver 制作的。 因此它的 html 是这样的:
<div style="width: 950px; float: left;">
<div style="width: 20px; float: left;"> </div>
<div style="width: 910px; float: left; color: #37444D; padding-top: 20px; font-size: 18px;">...</div>
</div>
我们可以做些什么来避免这种无响应的内容搞砸整个网页?
最佳答案
这是一个非常普遍的现实问题。在理想情况下,演示文稿和内容应该是分开的,但在这里听起来遗留数据太多而无法手动清理。
在这种情况下,我建议使用 Javascript 将内联样式替换为相关的类名。这将做的第一件事是删除所有固定宽度,因此您将拥有适合您的响应式设计的东西。
但是,其中许多样式实际上都在做某事,因此您应该编写一些响应式 CSS 来定位您新发现的类,这些类都将具有合理的(如果不是语义的)名称。 p>
如果您的站点运行 jQuery,则代码可以像这样简单:
$("div").each(function() {
var w = $(this).width();
$(this).addClass("width" + w);
$(this).removeAttr("style");
});
演示摆弄 CSS:http://jsfiddle.net/5G374/1/
关于html - 如何通过响应式设计阅读无响应的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22285145/