动态计算rem的js代码

以最小1024尺寸为例:

function rem() {
    var htmlEle = document.documentElement;
    var winWidth = htmlEle.clientWidth || document.body.clientWidth;
    var width = winWidth <= 1024 ? 1024 : winWidth;
    htmlEle.style.fontSize = Math.ceil(100 * (width / 1920)) + ‘px‘;
    htmlEle.style.height = htmlEle.clientHeight + ‘px‘;
    htmlEle.style.minWidth = 1024 + ‘px‘;
};
rem();
window.onresize = function() {
    rem();
}
时间: 2024-08-02 03:48:10

动态计算rem的js代码的相关文章

根据iPhone6设计稿动态计算rem值

rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一大串的font-size 值很繁琐,而且值也不能达到连续的效果. 就使用js动态计算给文档的fopnt-size 动态赋值解决问题. /** * [以iPhone6的设计稿为例js动态设置文档 rem 值] * @param {[type]} doc [文档元素] * @param {[type]}

rem自适应js代码

以后懒得写,直接复制了 var computedFz = (function(){ var designWidth = 375, rem2px = 100; function computedFz(){ var fz = Math.floor(window.innerWidth / designWidth * rem2px); document.documentElement.style.fontSize = (fz > 100 ? 100 : fz) + 'px' } return compu

第148天:js+rem动态计算font-size的大小,适配各种手机设备

需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem.设计稿中标注的任何px数值都可以换算成px/100的rem值. 就是说,每一个设备的宽度都定为7.5个rem,然后宽度非750px的设备里,就需要用JS对font-size做动态计算. 换算关系为:根节点的font-s

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <

还能输入多少字?(JS动态计算)

<div class="m-form ovh"> <div class="hd"> <span class="fr" id="message">还能输入200个字</span> 我要说: <select name="select" id="select"> <option value="12">北

js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)

本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座

根据生日的月份和日期,一行代码计算星座的js小函数(转)

看到了别人写的一个计算星座的js,冗长的有点儿看不过去,就自己写个了.我想,这个函数应该足够精简了:)什么 if 啊 switch 啊 for 啊 通通滚蛋了--传入参数:month [int] 1-12;  day [int] 1-31. // 根据生日的月份和日期,计算星座. http://blog.csdn.net/cuixiping/ function getAstro(month,day){        var s="魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";

JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?

今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了,而且操作数据的JS代码也不好使了!!! 一,使动态加载数据对应的CSS生效. //刷新Listview,使CSS生效 $("#控件ID").listview("refresh"); 在加载完数据代码之后,加入上面代码,把"控件ID"换成你的真正的Li

彻底搞好rem 与js的监控

什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及