很簡單，只需要在html文件中對你引入的css進行一個類似於媒體查詢的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="" />
<title>智能家居</title>
<link rel="stylesheet" href="./css/common.css">
<link rel='stylesheet' href='./css/home.css' media='screen and (min-width: 480px)'>
<link rel='stylesheet' href='./css/homeMobile.css' media='screen and (max-width: 479px)'>
</head>
<body>
</body>
</html>
注釋為紅色的代碼含義也就是說 ： 當你瀏覽器寬度大於480px時，瀏覽器就會解析./css/home.css這個css文件；
當你歷覽器寬度小於479px時，瀏覽器會解析./css/homeMobile.css這個css文件。
而我們瀏覽器寬度最小寬度一般情況下都不會低於480px；而移動端瀏覽器寬度一般都為375左右，所以我們判斷當小於480px時加載移動端的css樣式表