以iphone6plus 为标准单位是px的页面 在运行时转换为rem
在页面中引入以下代码,把样式中带px单位的样式放到本页面中的<style>标签中
/** * Created by Administrator on 2017-03-14. */ /*************************************设置页面rem的长度***START***************************************/ var num=screen.width;//获取屏幕的宽度 var font=num/10;//把宽度分成10份 document.getElementsByTagName('html')[0].style.fontSize=font+'px';//html下的font-size的大小就是1rem单位长度的大小 /*************************************设置页面rem的长度***END***************************************/ /*************************************把样式中的px替换成rem***START***************************************/ var htmlStr=document.getElementsByTagName("style")[0].innerHTML; var newStr=htmlStr.replace(/(\d+)px/g,function(a,b){ return ((b/41.4)+"").substr(0,6)+"rem"; }) document.getElementsByTagName("style")[0].innerHTML=newStr; /*************************************把样式中的px替换成rem***END***************************************/ /***************************************监听手机横屏***START**************************************************/ window.onresize=function(){//监听手机横屏,重新定义1rem的长度 var num=screen.width;//获取屏幕的宽度 var font=num/10;//把宽度分成10份 document.getElementsByTagName('html')[0].style.fontSize=font+'px';//html下的font-size的大小就是1rem单位长度的大小 } /***************************************监听手机横屏***END**************************************************/ //获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return unescape(r[2]); return null; } //跳转页面 function jumpPage(selector,url){ $(selector).click(function(){ window.location.href=url; }) }
请爱好前端技术的朋友,联系我,有问题大家一起讨论