css媒体查询外部引入 |html5跟css3网页样本

一般的媒体查询代码如下：

@media (min-width: 768px) {
/* 根据屏幕宽度大于等于768px时应用的样式 */
}
@media (max-width: 767px) {
/* 根据屏幕宽度小于等于767px时应用的样式 */
}

在外部引入CSS文件时，可以将媒体查询代码写在CSS文件中，例如：

/* 根据屏幕宽度大于等于768px时应用的样式 */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
/* 根据屏幕宽度小于等于767px时应用的样式 */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}

然后在HTML文件中使用以下代码引入CSS文件即可：

<link rel="stylesheet" href="styles.css" media="screen and (min-width: 768px)">

其中，media属性的值为大家要适配的设备条件。在这个例子中，大家要适配的设备是屏幕宽度大于等于768px时的条件，所以使用了min-width: 768px。

使用外部引入CSS文件的媒体查询，能够提高代码的可维护性和重用性，同时也方便多个页面之间的样式统一。