使用media来加载css

标签：

The New York Times with CSSThe New York Times without CSS (FOUC)

上面显示了加载css和不加载css样式的效果，不加载css显示的页面同样被叫做 “Flash of Unstyled Content” (FOUC).

所有，页面的渲染必须需要DOM和CSSOM。

css是渲染所必须的资源，所以越快的获取css资源将优化渲染

CSS “media types”和 “media queries” 允许我们指定css的使用条件：

一个media query包括了设备类型和一个亦或更多的表达式来表明设备的特点。

如果设备满足media query，那么将会暂停阻塞来加载css资源。

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">

• 第一个声明表示在任何类型的设备上均会加载css文件
• 第二个声明中all是默认参数，和第一个是等价的。
• 第三个声明表明css文档的加载将根据设备的方向来决定是否加载
• 最后一个旨在打印设备中才会加载 

记住，不管media上对css做出了怎样的加载显示，浏览器都是下载了所有css文件的。

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en

使用media来加载css

标签：

原文地址：http://www.cnblogs.com/RachelChen/p/5456183.html