以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;
})
}
以iphone6plus 为标准单位是px的页面 在运行时转换为rem的更多相关文章
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- 移动设备页面高度不足时min-height 的尴尬处理
移动设备页面高度不足时min-height 的尴尬处理 在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...
- vue px转换为rem
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
- 使用 v-cloak 防止页面加载时出现 vuejs 的变量名
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...
- iOS 利用webView加载html代码,在代理中获取html页面的链接时出现的问题
getDetailWebview.loadHTMLString(webViewData as String, baseURL:NSURL(string: "\(ProBaseWeb)&quo ...
- 设置ASP.NET页面的运行超时时间详细到单个页面及站点
这篇文章主要介绍了如何设置ASP.NET页面的运行超时时间,包括全局超时时间.单个站点超时时间.单个页面请求超时时间,需要的朋友可以参考下 全局超时时间 服务器上如果有多个网站,希望统一设置一 ...
随机推荐
- Java第11次作业:什么是继承?继承的好处?什么是覆写?super()?构造代码块?子父类初始化顺序? 抽象类能用final声明吗?final关键字声明类 方法 变量以及全局常量?抽象类的构造方法?
什么是继承? 继承是以父类为基础,子类可以增加新的数据或新的功能.子类不能选择性地继承父类.这种技术使得复用以前的代码非常容易. JAVA不支持多继承,单继承使JAVA的继承关系很简单,一个类只能有一 ...
- 标准C++(2)
一.类 C++是一种面向对象的语言,它在C语言的基础上添加了一种新的数据结构,类 ——class class是一种复合型的数据结构 它能够由不同类型的变量及函数组成 C++中的class与struct ...
- Linux-CentOS6.9启动流程排错
1 . CentOS6.9启动流程 POST 加电自检,是BIOS功能的一个主要部分.负责完成对CPU.主板.内存.硬盘子系统.显示子系统.串并行接口.键盘.CD-ROM光驱等硬件情况的检测. Boo ...
- vue里的数据
背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...
- c语言之内存管理
在计算机系统,特别是嵌入式系统中,内存资源是非常有限的.尤其对于移动端开发者来说,硬件资源的限制使得其在程序设计中首要考虑的问题就是如何有效地管理内存资源.本文是作者在学习C语言内存管理的过程中做的一 ...
- Python头脑风暴4
IT是全国平均薪资最高的行业,2017年全国最高,人均13点4万每年. 但技术固然好,创业拼的还是世界观下的创意. 蘑菇街,并夕夕,TikTok,头条,哪个不是创意用IT技术的现实化?? 未来,大平台 ...
- Mysql中的联合索引、前缀索引、覆盖索引
索引 索引是一种特殊的文件,它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. 联合索引 又名复合索引,由两个或多个列的索引.它规定了mys ...
- github FATAL:unable to access 'https://github.com/...: Failed to connect to github.com:443; No error
今天整理github,初次使用,很多都不懂,所以遇到了克隆失败的问题,研究了大半天,后来..... 打开Git Bash,克隆已有工程到本地: $ git clone https://github.c ...
- Win磁盘MBR转换为GUID
title: Win磁盘MBR转换为GUID date: 2018-09-02 11:52:32 updated: tags: [windows,记录,折腾] description: keyword ...
- day04_07 while循环01
while循环结构: #while 条件: print("any") print("any") 死循环案例 num = 1 while num<=10 : ...