Question

我对我继承的网站感到非常头疼，但最初没有创建。几乎所有样式都通过一个样式表完成。问题是自动调整大小不再有效，页面现在都以最小的指定宽度显示。随着时间的推移，各种不同的人都加入了CSS，因此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;}

IE中。有三种可能的页面宽度，由body，bodyM和bodyL样式给出。样式表中有无穷无尽的变体，指定不同的字体大小，行高等等，以与body，bodyM和bodyL样式一起使用。

所以我想知道的是，

有一个简单的原因，为什么这不再起作用？
有一种简单的方法可以绕过它，理想情况下无需更改整个样式表吗？

正如你所知，我绝对不是一个业余而不是专家！供参考，该网站适用于沐浴合唱社。

Answer 1

通过查看网站，我有以下答案：

a）是否有一个简单的原因导致它不再起作用？

看起来应根据屏幕分辨率使用不同的ID更新body标签。看起来像一个脚本错误，它不允许javascript设置id：Uncaught ReferenceError：getViewPortWidth未定义

b）有一种简单的方法可以解决它，理想情况下没有改变整个样式表？

是的，而不是检测视口，而是使用媒体查询根据分辨率调整内容。在这里阅读媒体查询：

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

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

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

我建议使用媒体查询，但上面的代码应调整内容的最大宽度为970px，最小宽度为700px。

Answer 2

正如其他人在此主题中所述，问题在于您缺少提供名为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框架将屏幕大小分成以下px：480,768,992,1200。

总之，这个网站已经超过了它的使用日期，你应该找一个人为你制作一个新模板，以便它可以在现代设备上工作，如手机，平板电脑和台式电脑：）

CSS被破坏 - 自动调整大小不再有效

2 个答案: