方法一:

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
//var foot = document.getElementById("foot");
if (!clientWidth) return;
if (clientWidth<640){
docEl.style.fontSize = 120 * (clientWidth / 640) + "px";
console.log(120 * (clientWidth / 640) + "px");
}else{
docEl.style.fontSize = "120px";
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);  

方法二:

var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px';  

移动端rem与px适应js的更多相关文章

  1. 移动端rem处理字体的js代码

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  2. js动态计算移动端rem

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...

  3. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  4. rem与px之间的换算(移动端)

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  5. HTML-移动端-rem px vw vh 的转换

    vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...

  6. JS动态计算移动端rem的解决方案

    首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...

  7. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  8. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  9. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

随机推荐

  1. LinkedHashMap基本原理和用法&使用实现简单缓存(转)

    一. 基本用法LinkedHashMap是HashMap的子类,但是内部还有一个双向链表维护键值对的顺序,每个键值对既位于哈希表中,也位于双向链表中.LinkedHashMap支持两种顺序插入顺序 . ...

  2. C# NetStream

    标题:NetStream 关注点:Read.Write 正文: int size = Read(buf, 0, buf.length); 这里一次会读入length个字节,如果小于这个数量,后面的就是 ...

  3. 2019-04-18 Beetl模板学习

    1. beetl的安装 使用maven: <dependency> <groupId>com.ibeetl</groupId> <artifactId> ...

  4. 2019中山大学程序设计竞赛 Triangle

    今天水了一发hdu上的中山校赛 这个题交了将近十遍才过...... 就是说给 n 个木棍,如果能找出3个能组成三角形的木棍就输出yes 反之输出no 乍一看很简单 一个排序遍历一遍就好了 但是n值太大 ...

  5. 苹果“抄袭”雷军PPT?小米高管如此评论

    3月26日凌晨,苹果如期举行了春季发布会,但发布会上并没有发布任何新硬件,主角全部是电视.游戏.信用卡等软件新品,值得一提的是,在苹果PPT上,有一张将硬件/软件/服务三部分单独提炼出来. “抄袭”雷 ...

  6. matplotlib设置中文标签

    import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei']

  7. Spring框架的@Valid注解

    上一篇文章介绍了springmvc的get请求参数可以是一个自定的对象.那么如何限制这个对象里的参数是否必传呢? 方法一:在代码逻辑里取出对象里的这个值,手动进行判断 方法二:使用@Valid注解,在 ...

  8. 如何快速上手Mac

    网络上关于Mac的教程很多,大部分问题通过百度和谷歌就能搞定了.对于技巧的细节,我将不再过多的重复,看了我的参考资料基本就能够全部了解,他们也比我讲得详细得很多.我这篇文章想做的,是以一个普通的win ...

  9. Tomcat系列(2)——Tomcat文件目录7个

    核心部分 bin (运行脚本) conf (配置文件) lib (核心库文件) logs (日志目录) temp (临时目录) webapps (自动装载的应用程序的目录) work (JVM临时文件 ...

  10. Redies安装,修配置,设置密码,

    Redies下载路径:https://github.com/MicrosoftArchive/redis/releases 我下的是Redis-x64-3.2.100.msi 下载后安装,一步一步操作 ...