<!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样式表-->