设置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. Linux系列（0）：入门之Linux版本说明以及用户登录与切换

    你知道你登录时所在目录吗? 知道根目录下有哪些子目录吗? 知道如何切换用户吗? 知道如何添加用户吗? 如果你不知道,那就可以了解一下本章节啦! 前言:你知道Linux有多少发行版吗,如下图所示: 1. ...

  2. Spring4学习回顾之路07- 通过工厂方法配置Bean

    一:通过静态工厂配置Bean 建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Des ...

  3. *** 没有规则可以创建目标“test”。 停止。

    在编译Linux模块时出现这个问题,在仔细检查了Makefile没有错误后,重名了了该源程序和Makefile所在文件夹的名字,与源程序名字一致,然后问题就消失了!它们的关联体现在哪啊!?

  4. 石子合并（直线版+环形版）&（朴素写法+四边形优化+GarsiaWachs算法）

    石子合并-直线版 (点击此处查看题目) 朴素写法 最简单常见的写法就是通过枚举分割点,求出每个区间合并的最小花费,从而得到整个区间的最小花费,时间复杂度为O(n^3),核心代码如下: ; i < ...

  5. 牛客 109B 好位置 (字符串水题)

    大意: 给定字符串$s1,s2$, 对于$s1$中所有与$s2$相等的子序列$t$, $t$在$s1$中的下标定义为好位置. 求$s1$是否所有位置都是好位置. 显然$s1$的前缀要与$s2$相等, ...

  6. 项目实践 hrm项目的设计过程

    人事管理系统的设计过程 一.数据库表和持久化类 1.1   进行需求分析,根据功能模块设计数据库表 1.2   设计持久化实体 面向对象分析,即根据系统需求提取出应用中的对象,将这些对象抽象成类,再抽 ...

  7. java lesson20homework

    package com.xt.lesson20; /** * 简易自动提款机 1. 创建用户类User(包含卡号.姓名.密码.余额等属性),用户开卡时录入的姓名和密码(自动分配一个卡号.初始金额设置为 ...

  8. 【原创】大数据基础之Oozie（4）oozie使用的spark版本升级

    oozie默认使用的spark是1.6,一直没有升级,如果想用最新的2.4,需要自己手工升级 首先看当前使用的spark版本的jar # oozie admin -oozie http://$oozi ...

  9. O030、Launch 和 shut off 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5460464.html   本节详细分析 instance launch 和 shut off 操作 ,以及如何在日志中快 ...

  10. wpf menuitem 简约显示的 template样式

    <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}&qu ...