动态选择pc移动端css文件_使用pc和移动端的css文件-优快云博客

本文链接：https://blog.youkuaiyun.com/xianfei9651/article/details/135347067

文章介绍了如何使用JavaScript的`matchMedia`方法检测屏幕尺寸变化，然后动态地在head中添加相应的CSS文件（如mobile.css和desktop.css），实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// main.js (或者你项目的入口文件)
const mobileMediaQuery = window.matchMedia(‘(max-width: 767px)’);
const desktopMediaQuery = window.matchMedia(‘(min-width: 768px)’);

const applyCSS = (mediaQuery, cssPath) => {
if (mediaQuery.matches) {
const link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = cssPath;
document.head.appendChild(link);
}
};

applyCSS(mobileMediaQuery, ‘/path/to/mobile.css’);
applyCSS(desktopMediaQuery, ‘/path/to/desktop.css’);

// 监听屏幕尺寸变化，动态应用样式
mobileMediaQuery.addListener(() => {
if (mobileMediaQuery.matches) {
const link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = ‘/path/to/mobile.css’;
document.head.appendChild(link);
}
});

desktopMediaQuery.addListener(() => {
if (desktopMediaQuery.matches) {
const link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = ‘/path/to/desktop.css’;
document.head.appendChild(link);
}
});