Link 标签中的 media 属性有什么用处？
Jos*_*des 4 html css media-queries
在link标签中使用media属性对我们有什么好处或者改进吗？如果是这样？那么我不需要@media在 CSS 中使用该规则，使用 media 属性就足以为我的网页设置断点，对吗？
在链接标签中使用 media 属性的一个优点是，通过这种方式包含样式，我们可以避免 CSS 渲染阻塞。
假设我有一个页面，其基本样式设置为内联，但我还在768px外部文件中设置了平板电脑 ( ) 的样式以及仅适用于平板电脑的其他一些样式。
我记录了链接标记中带有媒体属性和不使用 Google Chrome DevTools 两种情况的渲染过程。为了看到这个工作，我添加了网络节流Slow 3G和 CPU 减速到 ( 20x slowndown)
这是第一个在链接标记中不使用媒体属性的版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="http://demo.wpthemego.com/themes/sw_emarket/wp-content/cache/wpfc-minified/228b2c494ae153cae7dd875ddf3b1a2f/1503393313index.css" rel="stylesheet">
<link href="https://www.youtube.com/yts/cssbin/player-vflSoLyqv/www-player-webp.css" rel="stylesheet">
<style>
h1 {
background: yellow;
color: black;
font-size: 2rem;
font-weight: lighter;
}
</style>
</head>
<body>
<h1>blocked render</h1>
</body>
</html>
统计数据：
- 首次渲染时间为 1100 毫秒
- 样式渲染被推迟，直到所有 css 都被下载并解析（CSS 渲染阻塞）
使用媒体属性的第二个版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link media="(min-width: 768px)" href="http://demo.wpthemego.com/themes/sw_emarket/wp-content/cache/wpfc-minified/228b2c494ae153cae7dd875ddf3b1a2f/1503393313index.css" rel="stylesheet">
<link media="(min-width: 768px)" href="https://www.youtube.com/yts/cssbin/player-vflSoLyqv/www-player-webp.css" rel="stylesheet">
<style>
h1 {
background: yellow;
color: black;
font-size: 2rem;
font-weight: lighter;
}
</style>
</head>
<body>
<h1>Not render blocked under 768px</h1>
</body>
</html>
统计数据：
- 首次渲染时间为 2000 毫秒
- 渲染样式是因为浏览器知道链接标签仅适用于比
728px
因此，使用媒体属性可以帮助我们防止渲染阻塞并改善关键渲染路径。有关更多信息，请阅读开发者 Google Render Blocking CSS中的文章
| 归档时间： |
|
| 查看次数： |
5739 次 |
| 最近记录： |