我没有在我测试的任何其他浏览器中看到这个问题 - IE,Chrome,Opera - 但每当我从服务器加载页面时,我都会在应用CSS之前看到一些没有样式的内容.
这甚至发生在后续的页面加载中,其中所有内容都应该被缓存 - 每次页面加载时我都会看到非常规内容的瞬间,然后一切都安定下来.
也值得注意(也许？)该页面正在使用@ font-face来提取一些Google字体.它们存储在单独的样式表中,在主要的响应式样式表和媒体查询之后被拉出.
我尝试了一些不同的东西,没有效果:
可能值得一提的另一件事是我在页面的CSS中使用了很多Element Type CSS选择器.这是否有可能减慢渲染过程？
这似乎不太可能,因为在改变窗口的尺寸时立即重新渲染页面没有问题 - 响应的东西立刻变得很好.
所以这让我相信CSS的加载方式存在一些问题.
这是我的HEAD代码:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" …