一、兼容性问题
1、初始化样式
重置浏览器默认样式
（可参考插件Normalize.css）2、浏览器私有属性
针对不同浏览器采用不同写法 加前缀
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性
书写顺序：兼容性写法放到前面，把标准写法放到最后（可参考Autoprefixer自动化插件）
npm i autoprefixer
npm i postcss-cli
二、响应式问题
1、允许网页宽度自动调整
<meta name="viewport" content="width=device-width, initial-scale=1" />2、css3媒体查询@media查询 三种方式
①@media screen and (max-width:980px){}
②@import url("css/moxie.css") all and (max-width:980px);
③<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="css/moxie.css"/>3、注意点：
①不使用绝对宽度px,使用%
②字体使用rem
③流动布局：就是各个区块位置都是浮动的(可以使用float浮动，谨慎使用position绝对定位)
④图片自适应 img宽度设置