PC端兼容性问题

PC端兼容性问题 Dom Bom ecma

1. HTML对象获取问题
   FireFox：document.getElementById(“idName”);
   ie:document.idname或者document.getElementById(“idName”).
   解决办法：统一使用document.getElementById(“idName”);
2. const问题
   说明:Firefox下,可以使用const关键字或var关键字来定义常量;
   IE下,只能使用var关键字来定义常量.
   解决方法：统一使用var关键字来定义常量.
3. event.x与event.y问题
   说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
   Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
   解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
4. window.location.href问题
   说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
   Firefox1.5.x下,只能使用window.location.
   解决方法：使用window.location来代替window.location.href.
5. frame问题
   以下面的frame为例：

(1)访问frame对象: IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。 Firefox:只能使用window.frameName来访问这个frame对象. 另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象. (2)切换frame内容: 在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容. 如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing"; 6. 模态和非模态窗口问题 说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能. 解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing"; 7. firefox与IE的父元素(parentElement)的区别 IE：obj.parentElement firefox：obj.parentNode 解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择. 8. document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用document.formName.item(”itemName”)或document.formName.elements["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。 解决方法：统一使用document.formName.elements["elementName"]。 9. 集合类对象问题 问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。 解决方法：统一使用 [] 获取集合类对象。 10. 自定义属性问题 问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性。 解决方法：统一通过getAttribute() 获取自定义属性。 11. input.type属性问题 问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。 解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。 12. event.srcElement问题 问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。 解决方法：使用srcObj =event.srcElement ?event.srcElement : event.target; 如果考虑第8条问题，就改用myEvent代替event即可。 13. body载入问题 问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。 [注] 这个问题尚未实际验证，待验证后再来修改。 [注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。 14. 事件委托方法 问题说明：IE下，使用document.body.οnlοad= inject; 其中functioninject()在这之前已被实现；在Firefox下，使用document.body.οnlοad= inject(); 解决方法：统一使用document.body.οnlοad=newFunction(’inject()’); 或者document.body.onload = function(){/* 这里是代码 */} [注意] Function和function的区别。 15. Table操作问题 问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。 解决方法：//向table追加一个空行： var row = otable.insertRow(-1);var cell =document.createElement("td");cell.innerHTML ="";cell.className = "XXXX";row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。 16. 对象宽高赋值问题 问题说明：FireFox中类似obj.style.height =imgObj.height的语句无效。 Ø CSS 1. cursor:hand VS cursor:pointer firefox不支持hand，但ie支持pointer 解决方法: 统一使用pointer 2. innerText在IE中能正常工作，但在FireFox中却不行. 需用textContent。 解决方法: if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = "my text"; } 3. CSS透明 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 4. css中的width和padding 在IE7和FF中width宽度不包括padding，在Ie6中包括padding. 5. FF和IEBOX模型解释不一致导致相差2px box.style{width:100;border1px;} ie理解为box.width =100 ff理解为box.width =100 + 1*2 = 102 //加上边框2px 解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 6. IE5 和IE6的BOX解释不一致 IE5下div{width:300px;margin:0 10px 0 10px;} div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 7. ul和ol列表缩进问题 消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 8. 元素水平居中问题 FF: margin:0auto; IE: 父级{ text-align:center; } 9. Div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 10. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如：

移动端

viewport
先上模板

写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

禁止复制、选中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

---

苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

---

IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
方法：可以用html5的oninput事件去代替keyup

---

ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}

消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。
.box{
display: -webkit-box;
/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本语法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本语法: Chrome 21+ /
display: flex; / 新版本语法: Opera 12.1, Firefox 22+ */
}

input 的placeholder属性会使文本位置偏上
line-height: （和input框的高度一样高）—pc端解决方法
line-height：normal —移动端解决方法

input type=number之后，pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}

实现android和ios系统手机打开相机并可选择相册功能

$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf(‘iphone’) != -1) || (ua.indexOf(‘ipad’) != -1);
if (isIos) {
$(“input:file”).removeAttr(“capture”);
};
})

移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener(‘touchstart’,function() {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
});

移动端 video在部分android机播放之后浮在最上层，设置z-index无效
这个目前没有好的办法解决
情景一：页面有视频，点击页面按钮显示弹出层（比如让用户输入用户信息），这时候视频会出现在弹出层上面，是不是很-d疼？
方案：点击按钮时候把video隐藏hide，关闭弹出层show，过程中视频声音还在
情景二：页面很长，往下翻滚时，视频在播放，脱离文档流
方案：页面滚动到某一合适位置把video隐藏hide，回滚到某一位置show，过程中视频声音还在
有些说position可以解决，我没有试
关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g,’’);

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

移动端点击300ms延迟
原因：浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。
所以现在用click绑定事件呢，就会有300ms延迟的问题。
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js
移动端点透问题
案例如下：

点头事件测试

www.baidu.com

div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：
$(’#haorooms’).on(‘tap’,function(){
$(this).hide();
});

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。
原因：
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
解决：
尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
用fastclick，https://github.com/ftlabs/fas…
用preventDefault阻止a标签的click
延迟一定的时间(300ms+)来处理事件 （不推荐）
以上一般都能解决，实在不行就换成click事件。
下面介绍一下touchend事件，如下：
$("#haorooms").on(“touchend”,function(event) {
event.preventDefault();
});

react 移动端 兼容性问题和一些小细节
使用 ES6 的浏览器兼容性问题
react 对低版本的安卓webview 兼容性
iOS下 fixed与软键盘的问题
onClick 阻止冒泡
meta对于移动端的一些特殊属性
页面禁止复制、选中文本
1.使用 ES6 的浏览器兼容性问题
由于 Babel 默认只转换转各种 ES2015 语法，而不转换新的 API，比如 Promise，以及 Object.assign、Array.from 这些新方法，这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
主要有两种方式：babel-runtime 和 babel-polyfill。

A.babel-runtime
1.babel-runtime 的作用是模拟 ES2015 环境，包含各种分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如 promise：

2.它们不会在全局环境添加未实现的方法，只是这样手动引用每个 polyfill 会非常低效，我们可以借助 Runtime transform 插件来自动化处理这一切。
首先使用 npm 安装

3.然后在 webpack 配置文件的 babel-loader 增加选项：

B.babel-polyfill
而 babel-polyfill 是针对全局环境的，引入它浏览器就好像具备了规范里定义的完整的特性，一旦引入，就会跑一个 babel-polyfill 实例。用法如下：
1.安装 babel-polyfill

2.在入口文件中引用：

其实做到这些，在大部分浏览器就可以正常跑了，
2.react 对低版本的安卓webview 兼容性
A.android较低版本webview不支持Object.assign改用var objectAssign = require('object-assign’) 这种情况上面方案可以解决
B.import React from ‘react’;import ReactDOM from ‘react-dom’;//不可放在其他模块引入的后面，否则android5.0及以下版本webview报错
3.iOS下 fixed与软键盘的问题
fixed失效是由于软键盘唤起后，页面的 fixed 元素将失效（ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位），
既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本

样式：
warper{
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }
.fix-bottom{
position:fixed;
bottom:0;
width: 100%;
}

4.onClick 阻止冒泡
阻止冒泡事件分三种情况
A、阻止合成事件间的冒泡，用e.stopPropagation();

B、阻止原生事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();

C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免

5.meta对于移动端的一些特殊属性

6.页面禁止复制、选中文本 -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;

Vue适配

1，先看看网上关于移动端适配讲解
再聊移动端页面适配，rem和vw适配方案！
基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿；
这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！
目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿
目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作
为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性； 还有一种就是自己写百分比很不优雅

一、理论基础！
实现目标一
用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。 但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿，也就是只有在iphone6上这样的宽度才刚好占一半； 那么问题来了，如果在每个屏幕上都是50%呢，直接改变根字体大小（16px)不就完了么！！；11.718rem永远还是那个11.718rem，不用担心；
实现目标二、
用工具，webpack，postcss,postcss-pxtorem
二、准备主要工具！
viewport: 建议自行百度；

复制代码 vue-cli: 用这个主要是用webpack,这个构建工具大大降低了webpack的使用难度;快速构建出一个前端项目。 postcss: 官网解释：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！ postcss-pxtorem: postcss的一个插件，主要是帮你把px转换成对应的rem； 然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度！ 三、rem——开始干！ 第一步，先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url； 第二步，在项目根目录下添加.postcssrc.js文件，在里面写上 module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }}; 复制代码 rootValue，这里就是根目录的字体大小是32px，这里为啥设置成32呢，因为一般设计稿是750，比iphone6的大一倍，所以设置成16的两倍，就是32px;proplist就是那些属性需要转换成rem，这里是全部的意思； 比如你可选择设置； propList: ['font', 'font-size', 'line-height', 'letter-spacing'] minPixelValue就是最小转换单位，这是最小转换单位是2px的意思； 第三步，动态设置根字体大小！一段简单的js插入在head里面； (function() { function autoRootFontSize() { document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px'; // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单 } window.addEventListener('resize', autoRootFontSize); autoRootFontSize(); })();

这里，我想说的是完全可以用vw去设置根字体大小，26px/375px=4.267vw;就不用js去算了！ html{font-size:4.267vw}; //因为这个字体大小完全是随屏幕正比变化；
四、vw——开始干！ vw的方案就简单多了，因为vw本来就相对屏幕的百分比，所以我们不用再去动态的改变根字体大小了，只需要把750上的px大小转换成对应的vw值就完了，这一步交给postcss工具就可以！ 所以只需要两步！ 第一步，先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
第二步，在项目根目录下添加.postcssrc.js文件，在里面写上
module.exports = { “plugins”: { “postcss-import”: {}, “postcss-url”: {}, “postcss-aspect-ratio-mini”: {}, “postcss-write-svg”: { utf8: false }, “postcss-cssnext”: {}, “postcss-px-to-viewport”: { viewportWidth: 750, unitPrecision: 3, viewportUnit: ‘vw’, selectorBlackList: [’.ignore’, ‘.hairlines’], minPixelValue: 1, mediaQuery: false }, “postcss-viewport-units”: {}, }}
复制代码
viewportWidth是你设计稿的大小750，然后unitPrecision是vw值保留的小数点个数；
五、总结！
首先明白一件事：px就像cm一样，1px永远是1px;1cm永远是1cm； 那么我们从目标再反推一道逻辑： 我们想要的结果很简单: 一个元素的宽度（px) / 屏幕宽度(px) = 定值 （这个定值就是设计稿上面的值比例定值）；
——所以要做就是：屏幕变宽，要让元素宽度就变宽。 然鹅，我们写的代码里面的px是不可能变的（取的750设计稿上面的尺寸）；那么postcss编译出来的rem值也是不变的；
我们是怎么把设计稿里面的40px换算成相应rem的呢；你只要记住根字体大小的值（浏览器的默认是16px，现在设置成的32px)就是1rem；这交给工具同一去算； 得到：元素的宽度(px) = 元素的宽度（rem) ✖️32; 所以这个32是你必须要设置在postcss-pxtorem里面的；这样它就可以帮你算； 又因为： 元素的宽度(rem) ✖️ 根字体大小（px) = 元素的宽度（px) 元素的宽度（px) 变大， 元素的宽度(rem) 不变，那就只有改变根字体大小（px) ，变大；具体怎么变，上面的js代码已经解释了；
——所以我们做的就是：屏幕变宽，让根字体大小（px) 变宽，元素宽度就变宽。 750屏幕下是写的样式大小是1:1, 所以 又因为我们想要：根字体大小（px) / 屏幕宽度(px) = 32 / 750
所以： 根字体大小（px) = 32 / 750 ✖️ 屏幕宽度(px)
一个元素的宽度（px) / 屏幕宽度(px) = 定值 → 根字体大小（px) ✖️元素的宽度（rem）/ 屏幕宽度(px) → 32 / 750 ✖️ 屏幕宽度(px) ✖️元素的宽度（rem）/ 屏幕宽度(px) 等于什么？？ 得到的的是一个与屏幕大小无关的定值！
化简： 元素的宽度（rem）✖️32 / 750 = 元素的宽度（px) / 750 ——不就是设计稿上面的比例么！！！

验证以上操作出来的结果是否符合预期也很简单： 比如一个img的宽，高，在iphone6上的尺寸（审查元素的大小！px单位）： 根字体:16px; postcss算出来的rem值是2.5rem; 2.516=40px; 实际上也是40px; ——得到元素实际大小 40✖️40（px), 屏宽是375；比例是40/375=0.10667; 在iphone5上的尺寸（审查元素的大小！px单位）： 根字体：13.6533px; postcss算出来的rem值是2.5rem; 2.513.6533=34.13px; 实际上也是34.13px; ——得到元素实际大小 34.13✖️34.13（px), 屏宽是320；比例是34.13/320=0.10665;

2，自己项目适配配置(实践)
上的文章讲的理论和方法是可行的，自己项目的解决方案和他大同小异（主要用rem）： 1，插件：amfe-flexible + postcss-px2rem amfe-flexible：自动根据不同设备改变data-dpr的值，这样就可以根据不同的data-dpr设置字体大小不变，仅放大相应倍数。
postcss-px2rem：打包的时候把项目里面的px统一转换成rem，转换的基准值根据配置设置的（.postcssrc.js） /因为我是以750px(iphone6)宽度为基准，所以remUnit为37.5/

经过试验结果：
postcss-px2rem：只负责把项目里面的px按照基准值转换成rem，并不负责根节点动态font-size的计算。
例如，代码里面有个高度固定：180px， 基准值是：37.5， 那最后界面上的rem=180/37.5=4.8rem 不管换不同客户端手机，不同分辨率，界面上都是固定4.8rem【rem的值是固定的，根据根节点的font-size不同，在界面显示的px也不同】，界面上显示的px = 16（没有设置font-size的话默认是16px）* 4.8rem = 76.8px

【那么这个基准值：37.5怎么来的：
rem基准值计算 关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因: 1.由于我们所写出的页面是要在不同的屏幕大小设备上运行的,所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定;假如我们拿到的视觉稿是以iphone6的屏幕width=375px为基准: ar docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; 这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以
】
上面的组件只负责转换rem，并没有根据不同设备设置font-size，下面再加入这个组件amfe-flexible:

不同设备下的font-size不同。