项目背景：做一个公司的门面网站，响应书布局，适配各种设备及分辨率
技术：media媒体查询、flex布局、vue.js
实现方式：
<!DOCTYPE html><html><head><title>资产</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="./css/common.css"><link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" /><link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" /><link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" /><link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" /><script src="./js/polyfill.min.js" type="text/javascript"></script><!--兼容--><script src="./js/vue.min.js" type="text/javascript"></script></head><body><div id="app">。。。。。</div></body></html><script type="text/javascript">var app = new Vue({el: '#app',data: function(){return {}},methods: {initLoad:function(){}},mounted:function() {this.initLoad()}})</script>
css注意点：
1.ie中<div></div> 没有高度，flex-direction: column;时，不要写flex:1;flex:2;flex:3.......。否则样式错乱！！！！
2.ie中<div></div>和<p></p>一定要写宽度width。否则样式错乱！！！！
