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

以iphone6plus 为标准单位是px的页面 在运行时转换为rem的更多相关文章

  1. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  2. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  3. 移动设备页面高度不足时min-height 的尴尬处理

    移动设备页面高度不足时min-height 的尴尬处理 在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...

  4. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  5. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  6. Vue项目中自动将px转换为rem

    一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...

  7. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  8. iOS 利用webView加载html代码,在代理中获取html页面的链接时出现的问题

    getDetailWebview.loadHTMLString(webViewData as String, baseURL:NSURL(string: "\(ProBaseWeb)&quo ...

  9. 设置ASP.NET页面的运行超时时间详细到单个页面及站点

    这篇文章主要介绍了如何设置ASP.NET页面的运行超时时间,包括全局超时时间.单个站点超时时间.单个页面请求超时时间,需要的朋友可以参考下     全局超时时间 服务器上如果有多个网站,希望统一设置一 ...

随机推荐

  1. python从列表中删除相邻重复元素

    这里以一个栗子来用三种方法实现,输入a=['1','1','2','2','1','1'],输出b=['1', '2', '1'] 方法一: list1 = ['] def del_adjacent( ...

  2. 【Git版本控制】git中reset命令的详解

    git reset 命令详解(一) git reset 命令详解(二) reset命令的语法:git reset [选项]  [版本号]  [要回退的目标] 选项:--soft仅将head指针指向历史 ...

  3. Python爬虫系列-PyQuery详解

    强大又灵活的网页解析库.如果你觉得正则写起来太麻烦,如果你觉得BeautifulSoup语法太难记,如果你熟悉jQuery的语法,那么PyQuery就是你的最佳选择. 安装 pip3 install ...

  4. Applied Nonparametric Statistics-lec9

    Ref:https://onlinecourses.science.psu.edu/stat464/print/book/export/html/12 前面我们考虑的情况是:response是连续的, ...

  5. leetcode-17-BST

    530. Minimum Absolute Difference in BST Given a binary search tree with non-negative values, find th ...

  6. CodeForces 568B DP Symmetric and Transitive

    题意: 根据离散数学的内容知道,一个二元关系是一个二元有序组<x, y>的集合. 然后有一些特殊的二元关系,比如等价关系,满足三个条件: 自反性,任意的x,都有二元关系<x, x&g ...

  7. PYday16&17-设计模式\选课系统习题

    1.设计模式:对程序做整体得规划设计,这样做是为了更好的实现功能,使代码的可扩展性更好有27种常见的设计模式.流行的设计模式参考书:GoF设计模式.大话设计模式设计模式是为了更好的实现模块间的解耦,便 ...

  8. 十分钟了解HTTPS协议

    概念 HTTP协议上添加一层SSL/TLS协议进行加密,保证用户与web站点之间的数据传输时密文,而不是明文. PS:HTTPS协议 = HTTP协议 + SSL(Secure Sockets Lay ...

  9. Python hash、xml、configparser、sheve、shutil模块讲解 以及 面向对象初识

    今日内容: 1.hash模块2.xml模块3.configparser模块4.sheve 模块5.shutil模块 知识点一:hash什么是hash: hash是一种算法,该算法接受传入的的内容,经过 ...

  10. 紫书第一章训练1 D -Message Decoding

    Some message encoding schemes require that an encoded message be sent in two parts. The first part, c ...