html - 媒体查询 - 单独和独立的样式表？

Question

在索引 html 文档的头部使用媒体查询，是否可以告诉访问者浏览器使用独立于原始样式表的单独样式表？

目前，我使用的除了原始样式表之外还使用了 mobile_specific 样式表，这使得样式变得棘手。

<link type="text/css" media="screen" href="styles.css" rel="stylesheet">

<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">

所以除了styles.css，还要用到syles_mobile.css。如何告诉浏览器仅使用“styles_mobile.css”而不是同时使用两个样式表？

Answer 1

将媒体查询添加到与您的移动查询相反的常规样式表中：

<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">

<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

PS：我建议您使用标准的属性顺序。并且该type属性不是必需的，因为它具有默认值text/csswith link 和 style 元素以及默认值text/javascripton script 元素。