浏览器兼容和移动端适配方案

1.浏览器兼容：

一、css兼容:

1. 不同浏览器的标签默认的margin和padding不同

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率: 100%

解决方案：

CSS里 *{margin:0;padding:0;} 但是性能不好

一般我们会引入reset.css样式重置；

1. css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /

-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /

-o- / Opera浏览器(早期) /

-ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes

css3中的变形（transform）、过渡(transtion)、动画(animation)

border-radius 圆角

box-shadow 盒子阴影

flex 弹性布局

1. 图片默认有间距

问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

碰到几率： 20%

解决方案： 使用float属性为img布局(所有图片左浮)

1. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

二、js兼容：

1. 事件对象兼容

e = e || window.event;

1. 阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

1. 阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

1. 事件监听兼容

addEventListener ? addEventListener : attachEvent()

removeEventListener() ? removeEventListener() : detachEvent()

1. 事件目标对象兼容

var src = event.target || event.srcElement;

2.移动端兼容和适配：

1. 移动端适配方案：

1.百分比方案

原理

使用 百分比% 定义 宽度，高度 用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。

优势

原理简单，不存在兼容性问题

不足

如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

2.rem方案

原理

rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 的一种实现方式。

不足

不是纯css移动适配方案，需要引入js脚本 在头部内嵌一段 js脚本 监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定 耦合性，并且必须将改变font-size的代码放在 css 样式之前。

3.vh/vw方案

原理

视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

• vw : 1vw 等于 视口宽度 的 1%
• vh : 1vh 等于 视口高度 的 **1% **
• vmin : 选取 vw 和 vh 中 最小 的那个
• vmax : 选取 vw 和 vh 中 最大 的那个

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，使得这些元素能够随视口大小自适应调整。

优势

纯 css 移动端适配方案，不存在脚本依赖问题...相对于 rem 以根元素字体大小的倍数 定义 元素大小，逻辑清晰简单，视口单位依赖于视口的尺寸 "1vw ＝ 1/100 viewport width"，根据 视口尺寸的百分比 来定义 元素宽度

不足

存在一些兼容性问题，Android4.4以下不支持

4.rem+vw/vh方案

原理

vw/vh 方案能够实现宽度和高度的自适应，并且逻辑清晰，由于其被支持得较晚，所以存在一定的兼容性问题。将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的vw单位，可以通过postcss-plugin-vwtorem将其转换。具体的计算过程为：

对于1080px宽的设计稿，设置默认根字号的大小为100px，那么设计稿中1px对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到1rem = 9.256926vw

同时可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。

实用性

rem 弹性布局方式作为移动端web页面适配方法，后期从 rem 过渡到 vw ，只需要通过 改变根元素大小的计算方式 不需要其他处理。vw 将会成为一种更好的适配方式，目前由于兼容性的原因得不到广泛应用。rem+vw/vh 不存在 vw/vh 的兼容性问题，可以成为由 rem 向 vw/vh 转变的一种过渡方案。