首先，允許網頁手機模式，並且適配屏幕寬高，並且強制讓瀏覽器以最高的解析模式解析文本（為了避免兼容性不好）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

在ie9，特別需要引入一下幾個js，因為ie9不支持媒體查詢，引入幾個js，讓它支持

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

最後只需要在頁面加上media適配樣式，判斷屏幕大小，引用適當的樣式。

手機
<link rel="stylesheet" media="screen and (max-width: 600px)" type="text/css" href="/shop/css/base2.css">
非手機
<link rel="stylesheet" media="screen and (min-width:601px)" type="text/css" href="/shop/css/base.css">

tips：此種引用樣式的模式，適用於已經有了pc版本的網頁，然後需要適配做移動版本。

建議：若項目初始，有pc和移動端多種需求的，建議使用bootstrap框架搭建網站。 http://v3.bootcss.com/

響應式媒體查詢小記