首先，允许网页手机模式，并且适配屏幕宽高，并且强制让浏览器以最高的解析模式解析文本（为了避免兼容性不好）
<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- 600px)" type="text/css" href="/shop/css/base2.css">
非手机
<link rel="stylesheet" media="screen and (min-601px)" type="text/css" href="/shop/css/base.css">
tips：此种引用样式的模式，适用于已经有了pc版本的网页，然后需要适配做移动版本。
建议：若项目初始，有pc和移动端多种需求的，建议使用bootstrap框架搭建网站。 http://v3.bootcss.com/