能否通过Media Query修改HTML中PDF链接<a>的src属性？

先纠正个小细节：<a>标签用来指定链接的是href属性，不是src——这可能是你之前操作出错的小诱因之一。另外，CSS媒体查询不能直接修改HTML元素的属性，只能控制样式的显示/隐藏，这就是你之前用媒体查询关联属性后网站异常的核心原因。

下面给你几个实用的解决办法：

方案1：纯CSS实现（邮件场景首选） #

因为多数邮件客户端不支持JavaScript，所以用两个<a>标签配合媒体查询控制显示隐藏是最稳妥的：

<a href="desktop.pdf" class="pdf-link desktop">查看竞赛PDF</a>
<a href="mobile.pdf" class="pdf-link mobile">查看竞赛PDF</a>

<style>
/* 默认显示桌面版链接 */
.pdf-link.mobile { display: none; }

/* 移动设备（宽度≤768px）切换为移动版 */
@media (max-width: 768px) {
  .pdf-link.desktop { display: none; }
  .pdf-link.mobile { display: inline-block; }
}
</style>

这种方法不需要额外脚本，兼容性拉满，完全适配邮件环境。

方案2：JS动态切换（适合网页端灵活场景） #

如果是在网页里用单个<a>标签动态修改链接，可以监听窗口尺寸变化：

<a href="desktop.pdf" id="pdf-link">查看竞赛PDF</a>

<script>
function updatePdfLink() {
  const link = document.getElementById('pdf-link');
  link.href = window.innerWidth <= 768 ? 'mobile.pdf' : 'desktop.pdf';
}

// 页面加载和窗口 resize 时触发切换
window.addEventListener('load', updatePdfLink);
window.addEventListener('resize', updatePdfLink);
</script>

二维码适配优化建议 #

你提到二维码多被移动设备扫描，其实可以让二维码指向一个跳转中转页，在这个页面里自动根据设备尺寸跳转对应PDF：

<!-- 中转页 redirect-pdf.html -->
<script>
window.onload = function() {
  const targetUrl = window.innerWidth <= 768 ? 'mobile.pdf' : 'desktop.pdf';
  window.location.replace(targetUrl);
};
</script>

用户扫码后会自动跳转到适配的PDF版本，体验更流畅。

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