1、PC兼容性：

代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等。

（1）初始化css，保证消除不同浏览器的细微差别

（2）针对IE低版本浏览器及其他

 （A）使用前缀；-ms -> IE、-moz -> Firefox、 -webkit -> Chorme|Safari
 （B）css hack
 （C）条件hack

（3）其他
border（IE）.margin.padding.图片默认间距

2、移动端适配：

响应式与自适应的区别：

响应式针对的是不同分辨率设备而进行的适配式设计，以利用 @media 规则为主要手段；而自适应则忽略 @midea 以比例布局为主，目的式适应不同的浏览器窗口大小。

（1） 通过媒体查询的方式

@media screen and (max-width:600px){ 
	/*要设置的css样式*/
}

优点:
（A）media query可以做到设备像素比的判断，放大简单，成本低，特别是对移动和PC维护同一套代码的时候
（B）图片便于修改，只需修改css文件
（C）调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点：
（A）代码量比较大，维护不方便
（B）为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
（C）为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

（2）FLex 弹性布局（天猫布局）

（3）rem + viewport缩放 （淘宝）
根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。
实现原理：根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
viewport缩放 ：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-
scale=1,user-scalable=no">

（4）rem实现