我对自己继承但并非最初创建的网站感到非常头疼。几乎所有样式都是通过一个样式表完成的。问题是自动调整大小不再起作用，所有页面现在都以最小的指定宽度显示。随着各种人的加入，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样式。
我想知道的是
有一个简单的原因为什么它不再起作用？
有没有一种简单的方法可以解决此问题，理想情况下无需更改整个样式表？
如您所知，我绝对比专家更业余！
供参考，该网站适用于浴室合唱协会。
最佳答案
就像其他人在该线程中所说的那样，问题是您缺少提供了名为screenSize.js的功能的getViewPortWidth();。
如果找不到此文件，则似乎返回的只是一个数字，因此您可以通过将其放入名为screenSize.js的文件中来替换它：
function getViewPortWidth() {
return window.screen.width;
}
资料来源：https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
这是一些真正的旧代码，正如其他人所说，既然所有现代浏览器都支持媒体查询，那么最好使用直接CSS解决此特定问题。查看您的代码，似乎已广泛使用
#bodyM和#bodyL。开发人员可能需要大约30分钟才能发布样式表，但理论上是将@media包裹在每个使用#bodyM和#bodyL的规则周围。例如，如果您的CSS文件具有以下内容：
#bodyM #HeaderTitle h1, #bodyM #HeaderTitleConc h1, #bodyM #HeaderTitleConcD h1, #bodyM #HeaderTitleConcL h1, #bodyM #TwoPieceL h1, #bodyM #TwoPiece h1 {padding-top:23px; font-size:2.5em;}
#bodyL #HeaderTitle h1, #bodyL #HeaderTitleConc h1, #bodyL #HeaderTitleConcD h1, #bodyL #HeaderTitleConcL h1, #bodyL #TwoPieceL h1, #bodyL #TwoPiece h1 {padding:34px 0px 2px 10px; font-size:2.5em;}
您可以将其替换为：
@media (min-width: 800px) {
#HeaderTitle h1, #HeaderTitleConc h1, #HeaderTitleConcD h1, #HeaderTitleConcL h1, #TwoPieceL h1, #TwoPiece h1 {padding-top:23px; font-size:2.5em;}
}
@media (min-width: 980px) {
#HeaderTitle h1, #HeaderTitleConc h1, #HeaderTitleConcD h1, #HeaderTitleConcL h1, #TwoPieceL h1, #TwoPiece h1 {padding:34px 0px 2px 10px; font-size:2.5em;}
}
要转换它，我采取了以下步骤：
将
#bodyM规则包装在@media (min-width: 800px) { }中从每个包装规则中删除
#bodyM位将
#bodyL规则包装在@media (min-width: 980px) { }中从每个包装规则中删除
#bodyL位对此有一个例外，在前几行中有一些规则，例如：
#bodyM {width:800px;}
#bodyL {width:970px;}
从其中删除
#bodyM或#bodyL会破坏CSS，因此您需要通过用#bodyM替换#bodyL / body来交换这两者（按照上面列出的步骤）。更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
事实是，此代码很旧，并且针对不再使用的屏幕尺寸。您的代码将设计分割成700px，800px和980px，这在现代设备上几乎不可见。例如Bootstrap，最流行的CSS框架将屏幕尺寸分割为以下像素：480、768、992、1200。
总而言之，该网站的使用日期已经过去，您应该寻找可以为您制作新模板的人，以便它可以在现代设备（例如手机，平板电脑和台式机）上使用：
关于html - CSS损坏-自动调整大小不再有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30233533/