移动端rem.js的使用方法
下面的代码一是我根据rem的使用经验，自己写的一个rem.js，发现很好用，能适用所有移动端h5页面的自适应需求：
代码一：
window.onload = function(){
/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(,)
};
window.onresize = function(){
getRem(,)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
下面的代码二，是我在小米网上看到的移动端h5页面自适应代码，效果跟我的一样，也可以使用：
代码二： 小米官网的写法
!function(n){
var e=n.document,
t=e.documentElement,
i=,
d=i/,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||;n>&&(n=);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!),e.addEventListener("DOMContentLoaded",a,!))
}(window);
看这两个函数，把这些代码放到js里面，规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。
实际应用起来就是，#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem . 1px = 0.01rem。在页面中，凡是跟尺寸有关的padding、margin、width、height等等，都可以用rem来写单位，这样当不同分辨率的手机在看同一个页面时，效果几乎是一样的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/reset-min.css"/>
<script>
window.onload = function(){
getRem(,)
};
window.onresize = function(){
getRem(,)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
/*
//小米官网的写法
!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);*/
</script>
<style>
.wrap{position:absolute;top:;left:;bottom:;right:;background:#fefefe;}
.title{width:%;height:.98rem;line-height:.98rem;color:#fff;background:#e02222;text-align: center;font-size:.32rem;}
</style>
</head>
<body>
<div class="wrap">
<div class="title">首页</div>
</div>
</body> </html>
这里的demo只对字体大小、高度、行高做了rem换算，其他的没做，只是给大家看一个效果。
移动端rem.js的使用方法的更多相关文章
- 移动端rem.js使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...
- 移动端rem.js
rem 只与 html 的 font-size 有关,比如html{font-size: 16px} body{font-size: 62.5%},那么 1rem 还是 16px,与其他无关 在头部引 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- 移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
- 前端Js跨域方法汇总—剪不断，理还乱，是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- JS调用OC方法并传值，OC调用JS方法并传值////////////////////////zz
iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...
随机推荐
- HashMap源代码学习笔记
HashMap的底层主要是基于数组和链表来实现的,它之所以有相当快的查询速度主要是由于它是通过计算散列码来决定存储的位置. HashMap中主要是通过key的hashCode来计算hash值的 ...
- flask-本地线程-请求上下文补充
context(上下文)是flask里面非常好的设计,使用flask需要非常理解应用上下文和请求上下文这两个概念 本地线程 本地线程(thread local)希望不同的线程对于内容的修改只在线程内部 ...
- 怎样更改Linux中默认的openjdk为自己安装的JDK
(1)/etc/profileexport JAVA_HOME=/usr/java/jdk1.7.0_67-cloudera/export PATH=$PATH:$JAVA_HOME/binexpor ...
- iOS清理WebView的缓存
NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage]; ...
- GuozhongCrawler系列教程 （5） TransactionRequest具体解释
为了实现和维护并发抓取的属性信息提供线程安全的事务请求.TransactionRequest是一个抽象类自己不能设置Processor,却须要实现 TransactionCallBack接口.Tran ...
- ADO直接调用ACESS数据库MDB
1.ADO用ODBC链接不会出现堆栈溢出. 2.直接用ADO链接,因为对象不是NEW出来的,导致其成员变量也是栈上的,数组申请过大,栈溢出. 用VECTOR或者NEW对象,应该能解决.
- Deep Learning 33：读论文“Densely Connected Convolutional Networks”-------DenseNet 简单理解
一.读前说明 1.论文"Densely Connected Convolutional Networks"是现在为止效果最好的CNN架构,比Resnet还好,有必要学习一下它为什么 ...
- Vijos 1921 严厉的班长 【状态压缩动态规划】
严厉的班长 描述 木姑娘在班级里面是班长.虽然是副班长,却有着比正班长更高的威信,并深受小朋友们的爱戴. 每天眼保健操时间,木姑娘都要监督所有小朋友认真做眼保健操.整个过程被描述为n个时间段,第i个时 ...
- Hive 自定义函数 UDF UDAF UDTF
1.UDF:用户定义(普通)函数,只对单行数值产生作用: 继承UDF类,添加方法 evaluate() /** * @function 自定义UDF统计最小值 * @author John * */ ...
- 使用pt-query-digest进行日志分析
使用pt-query-digest sudo apt install percona-toolkit 也可以到官网 https://www.percona.com/downloads/percona- ...