媒体查询加载两套css

媒体查询可以通过设置不同的CSS样式来适应不同的浏览器特性，例如窗口大小、横竖屏、屏幕比例等。在CSS中，可以使用媒体查询来加载不同的CSS文件。
一个常见的用法是在HTML的`<link>`标签中使用媒体查询属性`media`来指定加载的CSS文件。例如，下面的代码表示当屏幕小于等于1200px时，才加载名为`style.css`的CSS文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1200px)" href="style.css">

这样就可以根据不同的屏幕大小加载不同的CSS样式。如果需要加载两套不同的CSS文件，可以在`<link>`标签中使用多个媒体查询属性，每个属性对应一个CSS文件。例如，可以设置两个媒体查询属性来加载两个不同的CSS文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1200px)" href="style1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1201px)" href="style2.css">

这样，当屏幕小于等于1200px时，加载`style1.css`文件；当屏幕大于1200px时，加载`style2.css`文件。这样可以实现加载两套不同的CSS样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS媒体查询看这篇就够了](https://blog.csdn.net/weixin_42989576/article/details/87923111)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [CSS - 响应式布局（一）媒体查询](https://blog.csdn.net/qfc_128220/article/details/126533393)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]