移动端rem.js使用方法
2018-02-02 11:09
435 查看
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求:
代码一:
window.onload = function(){
/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
下面的代码二,是我在小米网上看到的移动端h5页面自适应代码,效果跟我的一样,也可以使用:
代码二: 小米官网的写法
代码一:
window.onload = function(){
/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
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=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);
相关文章推荐
- 移动端rem使用方法
- 移动端开发 rem js 代码 及 css 的@media 使用
- 使用rem实现移动端适配的简单方法
- 3分钟读懂移动端rem使用方法
- 移动端使用localStorage缓存Js和css文的方法(web开发)
- 3分钟读懂移动端rem使用方法
- 移动端web开发适配方法--使用rem
- 控件开发时两种JS嵌入资源方式的使用方法
- 在asp中使用js的encodeURIComponent方法
- js使用方法
- js的with语句使用方法
- 比较简单实用的使用正则三种版本的js去空格处理方法
- 使用js动态创建控件的方法
- JS:attachEvent和addEventListener 使用方法
- Repeater使用:绑定时 结合 前台JS及后台共享方法
- iframe中js调用父页面的使用方法
- 使用JS创建文件再读取文件,读取文件再创建文件的方法
- 控件开发时两种JS嵌入资源方式的使用方法
- js中slice()方法的使用说明
- Repeater使用:绑定时 结合 前台JS及后台共享方法