當(dāng)今移動設(shè)備的種類繁多，不同設(shè)備的屏幕大小和分辨率也各不相同，因此在編寫頁面的時候，需要根據(jù)設(shè)備類型和其特性來加載不同的 CSS 樣式。這里我們可以使用 JS 的方法來判斷設(shè)備類型和屏幕尺寸，然后加載對應(yīng)的樣式文件。

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
//判斷設(shè)備類型
if (window.screen.width<= 768) {
//加載移動端樣式文件
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'mobile.css';
document.getElementsByTagName('head')[0].appendChild(link);
} else {
//加載 PC 端樣式文件
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'pc.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
}

以上就是一個簡單的 JS 判斷設(shè)備類型和屏幕尺寸，然后加載對應(yīng)的樣式文件的代碼。其中navigator.userAgent是獲取用戶設(shè)備的類型，window.screen.width是獲取用戶設(shè)備的屏幕寬度。如果設(shè)備類型符合我們預(yù)定義的條件，并且屏幕尺寸小于等于 768 像素，則加載mobile.css文件；否則加載pc.css文件。