以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页面的运行超时时间,包括全局超时时间.单个站点超时时间.单个页面请求超时时间,需要的朋友可以参考下 全局超时时间 服务器上如果有多个网站,希望统一设置一 ...
随机推荐
- Bootstrap历练实例:默认的列表组
Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...
- SQL学习总结笔记
SQL语句的效率不仅是sql语句的设计还有一些其他的原因比如网络 .是否有视图.是否有索引等等.这里主要描述的是我个人对于sql设计方面优化的一些见解: 首先要说明一下的是数据库SQL解析顺序: (1 ...
- dSYM文件
来到新公司后,前段时间就一直在忙,前不久 项目 终于成功发布上线了,最近就在给项目做优化,并排除一些线上软件的 bug,因为项目中使用了友盟统计,所以在友盟给出的错误信息统计中能比较方便的找出客户端异 ...
- Java使用Apache的HttpClient组件发送https请求
如果我们直接通过普通的方式对https的链接发送请求,会报一个如下的错误: javax.net.ssl.SSLHandshakeException: sun.security.validator.Va ...
- List<Object>删除某一个Object
1.直接删除: List<LineShop> tlineprices = new ArrayList<>(); tlineprices.remove(0); 2.使用遍历删除 ...
- LeetCode(224) Basic Calculator
题目 Implement a basic calculator to evaluate a simple expression string. The expression string may co ...
- linux防火墙firewall使用简介
1.firewalld的基本使用启动: systemctl start firewalld查看状态: systemctl status firewalld停止: systemctl disable f ...
- SQL_5_子句
接下来讲到的子句有: WHERE STARTING WITH ORDER BY GROUP BY HAVING WHERE: 使用频率仅次于SELECT和FROM STARTING WITH: 附加于 ...
- java基础语法中容易出错的细节
1 java中的数字默认类型为int **容易出现类型转换错误 long 定义的数字后面必须有 “l” “L” float 定义的数字后面必须有 “f” “F” java中比int表述范围大的数,不会 ...
- day03_07 变量的重新赋值01
在cmd中退出python,需要使用quit()命令 name = "Alex Li" name2 = name print(name,name2) name = "Ja ...