移动端rem与px适应js
方法一:
(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的更多相关文章
- 移动端rem处理字体的js代码
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
- js动态计算移动端rem
在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- rem与px之间的换算(移动端)
最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...
- HTML-移动端-rem px vw vh 的转换
vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...
- JS动态计算移动端rem的解决方案
首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
随机推荐
- 定时任务调度工作(学习记录 二)timer定时函数的用法
schedule的四种用法: 1.schedule(task,time) 参数: task----所安排的任务 time----执行任务的时间 作用: 在时间等于或超过time的时候执行且仅执行一次t ...
- git异常操作解决办法合集
1. git add .后发现提交错误,想撤销 git reset head 文件名-----撤销某个文件 git reset head --hard 强制撤销当前的所有操作到上次提交的版本 2. g ...
- luogu P1723 高手过愚人节
打算下周讲课就讲Manacher了 所以百度了一下相关题目,发现了一道千古好题 这道题没想到是一道模板题,模板中的模板 简要说一下思路,我们先复制一遍模板(甚至变量都不用改 然后唯一的区别就是要求的是 ...
- JPA javax.persistence.TransactionRequiredException
直接说一下解决方案 Dao层,一定要是Dao层. 1 增加Transactional,必须要事务! 2 增加Modifying,告诉jpa这是修改! @Transactional @Modifying ...
- Nginx从入门到实践(四)
Nginx常见问题和排错经验,实践应用场景中的方法处理Nginx安全,常见的应用层安全隐患,复杂访问控制,Nignx的sql防注入安全策略,Nginx的整体配置,搭建合理Nginx中间件架构配置步骤. ...
- 「FFT」题单(upd 2019.4.28)
持续更新(last upd 2019.4.28) ZJOI2014 力 [题目链接] 解法 对原式进行转换,然后卷积FFT套上去求解就可以了. 推导过程简洁版: \[F_i=\sum_{j<i} ...
- Spring 实现动态数据源切换--转载 (AbstractRoutingDataSource)的使用
[参考]Spring(AbstractRoutingDataSource)实现动态数据源切换--转载 [参考] 利用Spring的AbstractRoutingDataSource解决多数据源的问题 ...
- fhq_treap 小结
简介 \(fhq\_treap\)是一种非旋平衡树.在学习这篇文章之前,还是先学习一下普通\(treap\)吧 优点 相比于普通的\(treap\),它可以处理区间操作. 相比于\(splay\),它 ...
- 实验一 Java开发环境的熟悉(Linux + Eclipse)
学号 20175206 实验一 <Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实 ...
- 阿里云Redis开发规范
转自: https://yq.aliyun.com/articles/531067 摘要: 本文介绍了在使用阿里云Redis的开发规范,从键值设计.命令使用.客户端使用.相关工具等方面进行说明,通过本 ...