css兼容性跟响应式问题

一、兼容性问题

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宽度设置