如何根据屏幕尺寸自动加载对应HTML和CSS文件（HTML/CSS）

首先纠正你之前的CSS语法错误：你写的@media only screen and (max-width 700px)缺少冒号，正确写法是@media only screen and (max-width: 700px)——语法错误会导致浏览器无法解析整个CSS文件，这就是样式失效的原因。但要实现加载不同HTML文件的需求，仅靠媒体查询做不到，需要用以下两种方法：

方法1：JavaScript 客户端跳转（适合分离的HTML文件） #

把index.html作为默认入口页面，在其中添加脚本检测屏幕宽度，自动跳转到对应页面：

<!-- index.html 头部添加 -->
<script>
if (window.innerWidth < 700) {
    window.location.href = 'mobile.html';
}
</script>
<!-- 加载桌面端样式 -->
<link rel="stylesheet" href="styles.css">

同时在mobile.html中添加反向检测，防止用户手动访问：

<!-- mobile.html 头部添加 -->
<script>
if (window.innerWidth >= 700) {
    window.location.href = 'index.html';
}
</script>
<!-- 加载移动端样式 -->
<link rel="stylesheet" href="mobile.css">

这种方式会直接根据屏幕宽度加载对应的HTML和CSS文件，不需要在CSS中写媒体查询。

方法2：合并HTML，用media属性加载对应样式（可选优化） #

如果能把桌面端和移动端内容合并到同一个HTML文件中，可以用link标签的media属性指定样式加载条件，再通过CSS控制内容显示：

<!-- 仅在屏幕≥700px时加载桌面样式 -->
<link rel="stylesheet" href="styles.css" media="screen and (min-width: 700px)">
<!-- 仅在屏幕<700px时加载移动样式 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 699px)">

<!-- 桌面端内容 -->
<div class="desktop-content">...</div>
<!-- 移动端内容 -->
<div class="mobile-content">...</div>

然后在styles.css中隐藏移动端内容：

.mobile-content { display: none; }

在mobile.css中隐藏桌面端内容：

.desktop-content { display: none; }

这种方式无需页面跳转，适合内容差异不大的场景。

内容的提问来源于stack exchange，提问作者Phil Young