html - 如何通过响应式设计阅读无响应的文本?

标签 html css web responsive-design

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

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

最佳答案

这是一个非常普遍的现实问题。在理想情况下,演示文稿和内容应该是分开的,但在这里听起来遗留数据太多而无法手动清理。

在这种情况下,我建议使用 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/

相关文章:

html - 如何在容器外显示 UIkit 导航?

javascript - jquery 单选按钮上出现意外标记

javascript - 在 highchart 饼图悬停上添加多个标题

go - 处理多语言 Go Web 应用程序的标准/惯用方法是什么?

html - 父 div 的 div 背景中的 div 不适用于嵌套 div

html - 在删除另一个元素后保持元素宽度不变,同时仍保持响应

javascript - 页面首次加载时显示的侧边栏

html - 模态导致双滚动条

javascript - Android Chrome 网站

web - 服务器响应 304 时 Access-Control-Allow-Origin 不匹配