其实，兼容性，适配性都可以概括为差异性而解决差异性，只要了解差异点，就能轻松解决，但是要做到优雅的解决差异性还是要费些功夫的。全局处理可以一劳永逸，将其抽取为一个组件，修改下编码习惯，或者利用打包工具进行优化处理也行。

兼容性

第一步：CSS初始化

类似于这类操作

*{
    margin: 0;
    padding: 0;
}

但是这里推荐下载normalize.css Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

第二步：浏览器私有属性

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性对于书写顺序一定要注意，兼容性写法放到前面，把标准写法放到最后（其中原因就不用说啦吧）

当然，靠手写那无疑是要打人啦！自动化处理方法如下： Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。目前webpack、gulp、grunt都有相应的插件

第三步：CSS hack

有时我们还需要针对不同的浏览器甚至不同版本编写特定的CSS样式，这一过程就叫做CSS hack!

CSS hack的写法大致可以归纳为以下几种：条件hack、属性级hack、选择符级hack。

条件hack：主要针对IE浏览器进行一些特殊的设置

<!--[if <keywords>? IE <version>?]>
	代码块，可以是html，css，js
<![endif]-->

if后面的keywords（可以不填）有以下这些值可选：gt(大于)、gte(大于或等于)、lt(小于)、lte(小于或等于)、!(非) version：版本号举例：

<!--[if IE]>
	<p>你在非IE中将看不到我</p>
<![endif]-->

<!--[if lt IE 9]>
	<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

属性hack：在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

selector{<hack>?property:value<hack>?;}

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适
*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：选择IE6+
\0：选择IE8+和Opera15以下的浏览器

注意顺序：低版本的兼容性写法放到最后

.test {
  color: #090\9; /* For IE8+ */
  *color: #f00;  /* For IE7 and earlier */
  _color: #ff0;  /* For IE6 and earlier */
}

让H5新标签在IE9以下的浏览器中完美支持 html5shiv.js下载地址

<!--[iflt IE9]>
<script type="text/javascript"src="js/html5shiv.js"></script>
<![endif]-->

JS函数兼容

适配性

lib-flexible

手淘版的，以前常用的一种解决方案，因为无论新版旧版或多或少存在一些问题，无法完美适配，因此不过多介绍，推荐viewport 方案

Media Queries

它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
图片便于修改，只需修改css文件
调整屏幕宽度的时候不用刷新页面即可响应式展示
可用于PC端与移动端组件切换，比如：菜单列表，PC端与移动端呈现方式不一样缺点
代码量比较大，维护不方便
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

viewport + rem

要解决移动端适配问题，首先得搞明白的就是移动设备上的viewport了。通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域

利用meta标签对viewport进行控制

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

meta viewport 有6个属性

属性名	说明
width	设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
viewport-fit	当使用iPhoneX时，IOS11新增的特性处理底部小黑条问题

js移动端适配封装rem:1rem = 100px

(function(){
	var meta = document.createElement('meta')
	meta.setAttribute('http-equiv', 'Last-modified')
	var date = new Date().toString()
	meta.setAttribute('content', date)
	document.getElementsByTagName('head')[0].appendChild(meta)
	fnResize()
	window.onresize = function () {
	fnResize()
	}
	function fnResize () {
	var deviceWidth = document.documentElement.clientWidth || window.innerWidth
	if (deviceWidth >= 750) {
	deviceWidth = 750
	}
	if (deviceWidth <= 320) {
	deviceWidth = 320
	}
	document.documentElement.style.fontSize = (deviceWidth / 3.75) + 'px'
	}
})();

网友总结

常见的浏览器兼容性问题大汇总移动端适配方案指南

兼容性 ​

第一步：CSS初始化 ​

第二步：浏览器私有属性 ​

第三步：CSS hack ​

JS函数兼容 ​

适配性 ​

lib-flexible ​

Media Queries ​

viewport + rem ​

js移动端适配封装rem:1rem = 100px ​

网友总结 ​

兼容性