适配的js代码的github地址如下:https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
div {
宽:2快速眼动;
高度:3快速眼动;
}
通过上面的3个步骤,我们就可以将我们的移动端页面做成适配的了。
不过有一点,一直算来算去挺烦的,所以在写css的时候,最好使用css预处理器,比如sass,少来写,这样就方便很多了。
或者在sublimeText3中安装cssREM插件,正常书写px单位,然后编辑器自动帮你换算成快速眼动。
cssREM插件的安装教程:https://github.com/flashlizi/cssrem
容器的宽度高度我们用雷为单位,但是字体大小字体大小我们还是用px,而不是用rem
原因:
灵活。js的作者冬天是这样解释的:考虑到字体的点阵信息,一般文字尺寸多会采用16 px 20 px 24 px等值,若以rem指定文字尺寸,会产生诸如21 px, 19 px这样的值,会导致字形难看,毛刺,甚至黑块,故大部分文字应该以px设置。
一般标题类文字,可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30 px的话,也可以用雷设置字体。
flexible.js
;(函数(赢,自由){
var doc=win.document;
var docEl=doc.documentElement;
var metaEl=doc.querySelector(“元[name="视窗"]”);
var flexibleEl=doc.querySelector(“元[name=傲榛睢盷”);
var dpr=0;
var规模=0;
var tid;
var灵活=lib.flexible | | (lib.flexible={});
如果(metaEl) {
console.warn(“将根据已有的元标签来设置缩放比例”);
var=metaEl.getAttribute匹配(“内容”).match(/初始\剂量=((\ d \] +)/);
如果(匹配){
比赛规模=parseFloat ([1]);
dpr=方法(1/规模);
}
}else if (flexibleEl) {
var=flexibleEl.getAttribute内容(“内容”);
如果(内容){
var initialDpr=content.match(/初始\ dpr=((\ d \] +)/);
var maximumDpr=content.match(/最大\ dpr=((\ d \] +)/);
如果(initialDpr) {
dpr=parseFloat (initialDpr [1]);
规模=parseFloat ((1/dpr) .toFixed (2));
}
如果(maximumDpr) {
dpr=parseFloat (maximumDpr [1]);
规模=parseFloat ((1/dpr) .toFixed (2));
}
}
}
如果(!dpr,,!规模){
var isAndroid=win.navigator.appVersion.match (/android/gi);
var isIPhone=win.navigator.appVersion.match (/iphone/gi);
var devicePixelRatio=win.devicePixelRatio;
如果(isIPhone) {//iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
如果(devicePixelRatio祝辞=3,,(!dpr | | dpr祝辞=3)){
dpr=3;
}else if (devicePixelRatio祝辞=2,,(!dpr | | dpr祝辞=2)){
dpr=2;
其他}{
dpr=1;
}
其他}{//其他设备下,仍旧使用1倍的方案
dpr=1;
}
规模=1/dpr;
}//为html标签添加data-dpr属性
docEl。setAttribute (data-dpr, dpr);
如果(! metaEl) {
metaEl=doc.createElement(元);
metaEl。setAttribute(“名字”,“视口”);//动态设置元
metaEl。setAttribute(“内容”,“初始=' + +”,最大范围=肮婺? +”,最小规模=' +规模+ ',user-scalable=no ');
如果(docEl.firstElementChild) {
docEl.firstElementChild.appendChild (metaEl);
其他}{
var包=doc.createElement (div);
wrap.appendChild (metaEl);
doc.write (wrap.innerHTML);
}
}//根据dpr和物理像素设置快速眼动
函数refreshRem () {//getBoundingClientRect () .width相当于物理像素
var=docEl.getBoundingClientRect宽度().width;//宽度/dpr比;540等于独立像素
如果(宽/dpr祝辞540){
宽度=540 * dpr;
}
var rem=宽/10;//将屏幕宽度分成10份,1份为1快速眼动。rem转化px计算公式=d *(宽/10)
docEl.style。字形大?rem +“px”;
灵活。rem=赢。rem=快速眼动;
}//监听窗口变化,重新设置尺寸
赢了。addEventListener(“调整”,函数(){
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
},假);//当重新载入页面时,判断是否是缓存,如果是缓存,执行refreshRem ()
赢了。addEventListener (pageshow,函数(e) {
如果(e.persisted) {
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
}
},假);
如果(doc。readyState==='完成'){
doc.body.style。字形大?12 * dpr +“px”;
其他}{
医生。addEventListener (DOMContentLoaded”内,函数(e) {
doc.body.style。字形大?12 * dpr +“px”;
},假);
}
refreshRem ();
灵活。dpr=赢。dpr=dpr;
灵活。refreshRem=refreshRem;
灵活。rem2px=function (d) {
var val=parseFloat (d) * this.rem;
如果(typeof d==='字符串',,d.match (rem美元/)){
val +=皃x”;
}
返回val;
}
灵活。px2rem=function (d) {
var val=parseFloat (d)/this.rem;
如果(typeof d==='字符串',,d.match (/px/美元)){
val +=翱焖傺鄱?
}
返回val;
}
})(窗口,窗口(“自由”)| |(窗口(“自由”)={}));
