以iphone6plus 为标准单位是px的页面 在运行时转换为rem

Posted 2020-09-05 浩

在页面中引入以下代码，把样式中带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;
    })
}