在页面中引入以下代码,把样式中带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. Java Object类 instanceof关键字 练习:判断是否为同一人 集合按照人的年龄排序,如果年龄相同按名字的字母顺序升序 Comparator比较器

    package com.swift; public class Same_Person_Test { public static void main(String[] args) { /* * Obj ...

  2. Java面向对象基础 ——面试题

    1面向对象基础 JAVA基础语法自行掌握. 三大特性: 一 封装:★★★★★ 概念:是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. 好处:将变化隔离:便于使用:提高重用性:安全性. 封装原则: ...

  3. NSRegularExpression

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAU2CAIAAABFtaRRAAAAAXNSR0IArs4c6QAAAe9pVFh0WE1MOm

  4. vue 点击下拉框

    data: { hide:false, zhi:"全部" }, <div class="item"> <div class="c2c ...

  5. css文件和js文件后面带一个问号----2015-1103

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  6. CNCF 有哪些具体的项目内容?

    前言:CNCF(Cloud Native Computing Foundation)于 2015 年 7 月成立,隶属于 Linux 基金会,初衷围绕“云原生”服务云计算,致力于维护和集成开源技术,支 ...

  7. Java-JFrame窗体美化

    Java-JFrame窗体美化 JFrame默认的窗体比较土,可以通过一定的美化,让窗体表现的比较漂亮,具体要根据设计的设计图进行美化: JFrame美化的大致思路:先将JFrame去除默认美化效果, ...

  8. Python简单试题2

    1,给定一组数据,将奇数进行从小到大排序,偶数在原位置不变 例: 原数据:[5, 3, 2, 8, 1, 4]   排序后:[5, 3, 2, 8, 1, 4] 若数组为空,则返回空数组. 代码如下: ...

  9. Geode 集群搭建,快速上手使用

    Geode 介绍: Geode是一个提供实时.一致访问大型分布式云平台下数据密集型应用的数据管理平台. Geode 通过跨多进程,把内存.CPU.网络资源和可选的本地磁盘汇集起来,来管理应用程序对象及 ...

  10. 汇编语言 Part 2——寄存器

    处理器操作主要涉及处理数据.这些数据可以存储在内存中并从中访问.但是,读取数据并将其存储到内存中会减慢处理器的速度,因为它涉及将数据请求通过控制总线发送到内存存储单元并通过同一通道获取数据的复杂过程. ...