html - CSS 已损坏 - 自动调整大小不再有效

Question

我对一个我继承但并非最初创建的网站感到非常头疼。几乎所有的样式都是通过一个样式表完成的。问题是自动调整大小不再有效，所有页面现在都以指定的最小宽度显示。随着时间的推移，各种不同的人添加了它，CSS 变得非常笨拙。据我所知，调整大小由如下几个部分控制:

#bodyM #HeaderCentre, #bodyM #HeaderCentreFr, #bodyM #HeaderTitleConc, #bodyM #HeaderTitleConcD, #bodyM #HeaderTitleConcL, #bodyM #singleLine {width: 460px;}
#bodyL #HeaderCentre, #bodyL #HeaderCentreFr, #bodyL #HeaderTitleConc, #bodyL #HeaderTitleConcD, #bodyL #HeaderTitleConcL, #bodyL #singleLine {width: 630px;}

...还有这个:

body {width:700px; background:#fff; line-height:16px; margin:auto; font: 80%/1.2  verdana, arial, helvetica, sans-serif; color:#666; height:100%; }
#bodyM {width:800px;}
#bodyL {width:970px;}

即。共有三种可能的页面宽度，由 body、bodyM 和 bodyL 样式给出。样式表中有无穷无尽的变体，指定不同的字体大小、行高等，以配合 body、bodyM 和 bodyL 样式。

所以我想知道的是，

1. 这不再有效的原因很简单吗？

2. 有没有一种简单的方法可以绕过它，最好不需要更改整个样式表？

如您所知，我绝对是一个业余爱好者，而不是专家!作为引用，该网站供巴斯合唱团使用。

Answer 1

通过查看该网站，我可以为您提供以下答案:

a) is there a simple reason why this no longer works?

看起来 body 标签应该根据屏幕分辨率更新为不同的 id。看起来像是不允许 javascript 设置 id 的脚本错误:Uncaught ReferenceError: getViewPortWidth is not defined

b) is there a simple way I can get around it, ideally without having to change the whole stylesheet?

是的，不是检测视口(viewport)，而是使用媒体查询根据分辨率调整内容。在此处阅读有关媒体查询的信息:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

作为快速修复，您还可以在样式表末尾添加以下样式:

#body {
    width:100%;
    max-width:970px;
    min-width:700px;
}

我建议使用媒体查询，但是上面的代码应该在最大宽度 970 像素和最小宽度 700 像素之间调整内容的大小。