设置html默认font-size: 100px,此时默认的页面的width是750px,然后根据手机大小改变html节点的font-size,从而改变rem的大小,代码如下:

<script>
var size = 50;
var w = window.screen.width;
var fontSize = (w/375)*size;
document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
</script>

h5 rem计算的更多相关文章

  1. 一个因为系统字号设置导致的rem计算渲染异常问题

    测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...

  2. 移动端rem计算

    教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872    版权声明:本文为博主原创文章,未经博主允许不得转载. h ...

  3. css rem计算

    先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...

  4. rem计算适配

    git地址:https://github.com/wjf444128852/about-web-rem 建议在CSS引入之前引入下面这段JS代码,比例1rem:100px. 用了这个JS就不用在CSS ...

  5. rem计算

    //jquery实现 // $(function(){ // $(window).on("resize",function(){ // var width=$(window).wi ...

  6. vue3+vant h5: Rem 移动端布局适配之postcss-pxtorem和lib-flexible

    如果不引入插件的话:ui稿的px转化成rem需自己计算 根据设计稿我们需要自己计算元素的rem(假如我们将html根元素font-size设置为41.4px): 那么1rem=41.4px; ui稿上 ...

  7. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  8. 移动端单位rem计算

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

  9. h5 rem js自动适配

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

随机推荐

  1. PYTHON 100days学习笔记001:初识python

    现在学习这个确实时间很紧,但是迟早得学,以后PYTHON自动化运维,PYTHON自动测试都需要用的到,甚至可以往数据分析方向发展,刚好最近有数据观组织的python100天计划,就参加了,做好笔记,一 ...

  2. CWMP开源代码研究7——cwmp移植

    原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 声明:本系列涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅 ...

  3. C++命名建议

    如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一.带层次结构.清晰明了的命名准则就是必不可少而且非常好用的工具. 活跃在生物学.化学.军队.监狱.黑社会.恐怖组织等各个领域内的大量有识 ...

  4. Oracle-DQL 2- 限定和排序

    1.where子句--查询30号部门员工的姓名,职位和工资SELECT ename,job,sal,deptno FROM empWHERE deptno = 30; --查询职位是manager的员 ...

  5. FTP文件上传下载

    使用Apache Commons Net来实现FTP服务器文件的上传 与 下载 maven配置Jar <!-- https://mvnrepository.com/artifact/common ...

  6. Spring MVC(一)Spring MVC的原理

    1.Spring MVC的目的 构建像Spring框架那样灵活和松耦合的Web应用程序. 2.Spring MVC中如何处理Request? 每当用户在Web浏览器中点击链接或者提交表单时,Reque ...

  7. 你懂什么是分布式系统吗?Redis分布式锁都不会?

    分布式系统涉及到很多的技术.理论与协议,很多人也说,分布式系统是“入门容易,深入难”,有一些人简历上写着熟悉分布式系统,很多人都是管中窥豹只见一斑. 究竟什么是分布式系统? 分布式系统是由一组通过网络 ...

  8. Redis基本数据

    Redis Redis是一个速度非常快的非关系数据库(NoSql),它可以存储键(key)与五种不同的值(value)之间的映射.可以将存储的内存的键值对数据持久化到硬盘. Redis 数据结构 Re ...

  9. golang(9):网络编程 & redis

    网络编程 TCP/IP 协议: . TCP(传输控制协议) -- 应用程序之间通信 . UDP(用户数据包协议)-- 应用程序之间的简单通信 . IP(网际协议) -- 计算机之间的通信 . DHCP ...

  10. cpu 100%怎样定位

    先用top定位最耗cpu的java进程 例如: 12430工具:top或者 htop(高级)方法:top -c 显示进程运行详细列表键入 P (大写P),按照cpu进行排序 然后用top -p 124 ...