h5兼容性总结

在解决问题方面，尤其是在解决兼容性方面，兼容ios10以及Android5，做了些总结:

1. CSS添加前缀，可以利用postcss-loader,新建postcss.config.js，添加 ‘autoprefixer’: {},配置;然后新建.browserslistrc文件，配置兼容浏览器，ios以及Android的版本范围。

   引入postcss-loader:

    use: ['postcss-loader'],
   

   新建postcss.config.js:

   module.exports = {
     plugins: {'autoprefixer': {}},
   };
   

   新建.browserslistrc文件:

   last 5 version
   > 0.2%
   not ie <= 8
   not op_mini all
   

2. 定位问题，绝对定位或者固定定位，top,right,bottom,left中必须至少有两个才可以确定位置，否则在低版本中会出现样式错乱；

   index.less:

   .wrapper {
   	width: 100%;
   	height: 100%;
   	position: relative;
   	
   	.start-button {
   		position: absulute；
   		bottom：20px；// top right bottom left 至少出现两个
   		right: 10px;      
   	}
   }
   

3. 在有安全区域的手机中，一定要写兼容性的CSS。比如bottom: env(safe