移动端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交互,其实再说明白一点 ...
随机推荐
- ubuntu 用shell脚本实现将当前文件夹下全部文件夹中的某一类文件复制到同一文件夹下
当前文件夹下有一些文件和文件夹,当中每一个文件夹里都有若干.txt文件. 如今要求在当前文件夹创建一个新文件夹all,且将那些文件夹全部.txt文件 都复制到文件夹all.在ubuntu12.04的s ...
- eclipse svn org.tigris.subversion.javahl.ClientException: RA layer request failed
突然之间eclipse使用svn更新项目时报错,org.tigris.subversion.javahl.ClientException: RA layer request failed 网上搜的都是 ...
- TCP连接建立与终止，及状态转换
TCP连接建立 三路握手 三路握手发生在客户端发起connect请求到服务端accept返回中,在三路握手发生前,服务端必须准备好接受外来连接,这通常通过服务端调用 (socket.bind.list ...
- OpenStack源码系列---nova-compute
nova-compute运行的节点为计算节点,虚拟机运行于计算节点上.例如对于创建虚拟机请求,nova-api接收到客户端请求后,经过nova-scheduler调度器调度,再将请求发送给某个选定的n ...
- for in 与for of
最近在项目中需要用到遍历对象,用ES6 for of对象后报如下错误 TypeError: [object Object] is not iterable!,网上查询阮大神的教程发现“ES6 的有些 ...
- weblogic启动后 登陆控制台特别慢的问题
weblogic官方文档给出的问题原因: 江湖偏方: 修改jdk:修改$JAVA_HOME/jre/lib/security/java.security文件,替换securerandom.source ...
- js中字符串函数indexOf与search的区别
IndexOf()方法是用来判断一个字符串是否存在于一个更长的字符串中.从长字符串左端到右端来搜索,如果存在该子字符串就返回它所处的位置(即索引).如果在被搜索的字符串没有找到要查找的字符串返回-1. ...
- Spark理论学习笔记（一）
1.调度 分为FIFO和FAIR两种模式 创建调度池:sc.setLocalProperty("spark.scheduler.pool", "pool6") ...
- 使用masonry手写约束
在iOS开发过程中,手写contraints是非常痛苦的一件事情,往往那么一丢丢功能要写大量的代码,非常容易发生错误,并且非常不方便调试.所以只有在不得以的情况下才采用手工方式写contraints, ...
- 嵌入式Linux学习方法——给那些彷徨者（下）
上一章解决了嵌入式Linux的“学什么”问题,这一章则具体来说一下“怎么学”. 只要做好以下3点: 1.学习顺序.学习任何东西都应该由浅入深,不能一口吃下一个大胖子,得循序渐进.很多刚开始想学习Lin ...