0

我在我网站的所有页面中使用960gs自适应 CSS。我在所有页面中都有以下脚本:

<script>
var ADAPT_CONFIG = {
  path: '/css/960gs/',
  dynamic: true,
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
  ]
};
</script>
<script src="/js/adapt.min.js" type="text/javascript"></script>

我的问题是,当用户转到另一个页面时,用户可以看到适当的样式表的选择,特别是在使用 Mozilla Firefox 时。我的意思是,起初,布局占据了所有屏幕,不到一秒钟,布局就变成了合适的布局。我不知道如何描述这件事。但我想要的是提高它在加载适当样式表时的性能。

谢谢

4

1 回答 1

1

在 960.gs 网站上它指出

“Adapt.js 的一个潜在缺点是在获取新样式表时可能会出现短暂的无样式内容(将其视为 CSS 的“Ajax”)。我已尽我所能通过保持 CSS 文件较小来缓解这种情况(3 KB)。值得注意的是,这是针对具有多种解决方案的问题提出的而非规定的方法"

所以这是一个已知问题。我不得不说我不喜欢用 javascript 来做这件事,CSS 完全有能力处理不同的分辨率。如果您有基本的 CSS 并添加一些单独的属性来处理不同的分辨率,如下所示:

@media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> }
@media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> }
@media only screen and (max-width: 767px) { <<CSS for mobile portrait>> }
@media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }
于 2012-06-15T07:56:23.837 回答