隨著移動設(shè)備的普及，網(wǎng)頁不再只有在桌面端環(huán)境下運(yùn)行，而是需要適配各種設(shè)備。其中一個(gè)重要的問題就是如何根據(jù)設(shè)備的分辨率加載相應(yīng)的css樣式文件。這里介紹一種基于JavaScript的方案。

我們可以通過JavaScript獲取到設(shè)備的分辨率，然后根據(jù)分辨率的大小來動態(tài)加載不同的css樣式文件。

// 獲取屏幕寬度
var screenWidth = window.screen.width;
// 判斷屏幕寬度
if (screenWidth <= 640) {
// 如果屏幕寬度小于等于 640，則加載移動端 css 文件
var linkElement = document.createElement('link');
linkElement.href = 'mobile.css';
linkElement.rel = 'stylesheet';
document.head.appendChild(linkElement);
} else {
// 否則，加載桌面端 css 文件
var linkElement = document.createElement('link');
linkElement.href = 'desktop.css';
linkElement.rel = 'stylesheet';
document.head.appendChild(linkElement);
}

上面的代碼中，首先獲取了屏幕寬度，然后判斷寬度是否小于等于 640，如果是，則加載移動端css文件；否則，加載桌面端css文件。通過這樣的方式，我們可以為不同的設(shè)備提供不同的樣式，從而實(shí)現(xiàn)更好的用戶體驗(yàn)。