在现代网页设计中，适配不同设备已成为必备技能之一。为了实现这一目标，我们可以利用JavaScript来检测用户的浏览器类型以及屏幕分辨率，并据此加载不同的CSS文件。这种方法不仅能提升用户体验，还能优化加载速度。

首先，通过`navigator.userAgent`可以获取用户浏览器的信息。例如，判断是否为Chrome、Firefox或Safari等主流浏览器。其次，使用`window.innerWidth`或`screen.width`来获取屏幕宽度，从而区分大屏PC与小屏手机。一旦条件匹配，就可以动态地插入相应的CSS文件。例如：

```javascript

if (window.innerWidth < 600) {

var link = document.createElement('link');

link.rel = 'stylesheet';

link.href = 'mobile.css';

document.head.appendChild(link);

} else {

var link = document.createElement('link');

link.rel = 'stylesheet';

link.href = 'desktop.css';

document.head.appendChild(link);

}

```

这种方法简单高效，能够确保每位访客都能获得最佳浏览体验。🌐✨