1. LINK元素概述
LINK元素可以用来定义页面与外部资源之间的关系，这些资源可以是样式表、ICON图标、RSS等。其中，最重要的是样式表。
在HTML文档中，LINK元素有两种类型：文档关系（rel）和媒体（media）属性。本篇文章，我们主要讲解LINK元素上媒体属性的作用。
2. LINK元素的媒体属性
LINK元素的媒体属性用来指定样式表适用的媒体类型，即告诉浏览器什么情况下应该应用指定的样式表。
2.1 媒体属性介绍
LINK元素的媒体属性是通过”media”属性指定，这个属性的值可以是以下媒体类型之一：
all //应用于所有设备
screen //应用于计算机屏幕，平板电脑，智能手机等
print //应用于打印预览模式或者打印输出
tv //应用于电视机，机顶盒等
aural //应用于属听设备，例如屏幕阅读器
除此之外，medi可以指定宽度和高度等数值。如下：
screen and (max-width:480px) //屏幕宽度最大为480像素，例如移动端
当然，我们也可以自定义媒体类型，只要浏览器支持。
2.2 示例说明
下面，我们以一个简单的例子来说明LINK元素上媒体属性的作用：
<head>
<link href="style.css" rel="stylesheet" media="screen and (min-width: 480px)">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 479px)">
</head>
上面的代码中，有两个LINK元素，分别引用了style.css和mobile.css两个样式表文件。其中，第一个LINK元素用media属性指定了适用范围：宽度不小于480像素的屏幕，适用于PC端等大屏幕设备；而第二个LINK元素也指定了适用范围：宽度小于等于479像素的屏幕，适用于移动端等小屏幕设备。
通过这种方式，可以让页面在不同的设备上都能够呈现出最佳的显示效果。
2.3 LINK与@media的配合使用
LINK元素和@media查询实际上是相互配合使用的，从而实现不同分辨率下的自适应排版。
在CSS中，@media可以根据媒体类型和特定的条件来指定网页元素的样式，而media属性可以根据媒体类型来选择外部样式表。
下面，我们以一个实际的例子来演示LINK元素和@media查询的配合使用：
<head>
<link href="style.css" rel="stylesheet" media="screen and (min-width: 480px)">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 479px)">
<style>
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}
@media screen and (min-width: 481px) {
body {
font-size: 16px;
}
}
</style>
</head>
上面的代码中，第一个LINK元素引用了style.css样式表，作用于宽度不小于480像素的屏幕；第二个LINK元素引用了mobile.css样式表，作用于宽度小于等于479像素的屏幕，这两者相辅相成实现了根据设备宽度选择样式表的目的。
同时，通过在head标签中添加内联的@media查询，当屏幕宽度小于等于480像素时，body标签的字体大小为14px；当宽度大于480像素时，字体大小为16px。
这种组合方式能够让页面完美的适应不同宽度的设备。
3. 总结
LINK元素是HTML语言中非常重要的元素之一，它可以用来定义页面与外部资源之间的关系，其中最重要的是样式表。LINK元素上的媒体属性可以根据媒体类型和特定条件选择合适的样式表，让页面完美的适应不同的设备。