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

Question

Basically we have what is called a responsive design in HTML, but a part of real content served through our web page that comes from a very big database with product description was made with Dreamweaver. Therefore its html is something like this:

<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>

What can we do to avoid this unresponsive content to screw up the entire web page?

Answer 1

This is a pretty common real-world problem. In an ideal world the presentation and content would be separate, but here it sounds like there's too much legacy data to manually clean up.

In this case I'd recommend using Javascript to replace the inline styles with relevant class names. The first thing this will do is remove all of your fixed widths, so you'll have something that fits with your responsive design.

However, many of those styles were actually doing something so you should then write some responsive CSS to target your new-found classes, which will all have sensible (if not semantic) names.

If your site runs jQuery the the code could be as simple as:

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

Demo fiddle with CSS: http://jsfiddle.net/5G374/1/