在页面中引入以下代码,把样式中带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. Unicode与ASCiI之间有什么区别?java当中的转义字符 Character类的使用 String类的使用

    ASCII码 称为 美国标准信息交换码 (American standard code of Information Interchange) 其中一共有多少个码?2的7次幂 128个 Unicode ...

  2. comboBox 下拉宽度自适应

    ///适用combobox绑定datatable private void comboBox_DataSourceChanged(object sender, EventArgs e) { Combo ...

  3. NOIP复习之1 数学数论

    noip一轮复习真的要开始啦!!! 大概顺序是这样的 1.数学 2.搜索贪心 3.数据结构 4.图论 5.dp 6.其他 数学 1.数论 数论被称为数学皇冠上的明珠,他的重要性主要在于它是其他学习的祖 ...

  4. 蓝牙stack bluez学习(1)Stack Architecture

    Bluez支持的features Core Specification 4.2 (GAP, L2CAP, RFCOMM, SDP, GATT) Classic Bluetooth (BR/EDR) B ...

  5. vsftpd服务安装与虚拟用户配置

    vsftpd的全名是“Very secure FTP Daemon” 一.安装vsftpd安装db4-util用于生成认证文件 yum -y install db4-utils 安装vsftpd yu ...

  6. 帮助解决NoSuchMethodError

    排查出具体的类,然后将冲突的类删除掉即可 Method[] methods = Base64.class.getMethods(); // 输出实际jar包路径 System.out.println( ...

  7. 【php】对象的比较

    对象的比较 相等的比较 ==当使用比较运算符(==)比较两个对象变量时,比较的原则是:如果两个对象的属性和属性值 都相等,而且两个对象是同一个类的实例,那么这两个对象变量相等. 全等的比较 ===如果 ...

  8. Linux优化总结

    1)netstat (*****)查看网络状态lntup或an 1.[listening|-l] 2.[--numeric|-n] 3.[--tcp|-t] 4.[--udp|-u] 5[--prog ...

  9. /dev/sda is apparently in use by the system; will not make a filesystem here!解决方法

    /dev/sda  is apparently in use by the system; will not make a filesystem here! 翻译:系统显然在使用,不会在这里做文件系统 ...

  10. filter 作用

     过滤器 filter用于拦截用户请求,在服务器作出响应前,可以在拦截后修改request和response,这样实现很多开发者想得到的功能. filter是一个可以复用的代码片段,可以用来转换HTT ...