兼容性问题以及解决方案

谈到兼容性问题，对于兼容在工作中我总结了一些，现在做一下记录，以供以后学习。
兼容性的问题分为：1.多种浏览器兼容性问题(一般是PC端) 2.横竖屏兼容性问题（一般多以hybridAPP）
多种浏览器兼容性问题：
1） 不使用太过超前语法，例如：es6语法，例如：字符串模板，es5新增语法：map（）
2） css样式编写，尽量不用css3写法，如果非要用则需要加内核兼容前缀，
例如：transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */
3） 针对弹性盒也是需要做兼容的，为避免这样的情况可以采用gulp或者一些其他打包工具编译

横竖屏兼容性问题：

对于，做hrbrid App的公司来讲，横竖屏兼容对于web前端是必遇到的问题。针对横竖屏兼容性问题，对于前端而言，采取的解决方案很多：
a. 利用媒体查询，判断宽度，针对现在主流手机的宽度都不会超过720px,所以通过宽度来判断，如果宽度超过720px，那么就可以认为是横屏状态了。

b. a的解决方案能够解决手机端的情况,但是比较粗糙，无法兼容ipad等平板的问题，有的平板宽度超过720px,a的方式已经默认为是横屏了，但是人家还是竖屏。那么采用

@media all and (orientation : landscape) { } 
@media all and (orientation : portrait){ 
h2{color:green;}/*竖屏时字体绿色} 

利用css判断竖竖的方法，同时再将媒体查询判断宽度的代码放到竖屏，将二者结合效果更好。
c. 最后一个解决方案就是，需要通过客户端了，利用客户端的方法，判断横竖屏，然后，再判断是取宽度还是高度值来计算rem布局的跟字体大小
其实，这三种方法并不冲突，反而是互相补足，所以三种结合起来用是最佳的方案