Question

我在我网站的所有页面中使用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时，用户可以看到选择合适的样式表。我的意思是，首先，布局占用所有屏幕，在不到一秒的时间内，布局变为适当的布局。我不知道如何形容这件事。但我想要的是在加载适当的样式表时提高它的性能。

由于

Answer 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>> }

改进960gs自适应CSS

1 个答案: