设置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. [CF544D]Destroying Roads_最短路_bfs

    D. Destroying Roads 题目大意: In some country there are exactly n cities and m bidirectional roads conne ...

  2. WijmoJS 中自定义 React 菜单和列表项模板

    WijmoJS 中自定义 React 菜单和列表项模板 在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强. WijmoJS的菜单和类似列表 ...

  3. 【LOJ】#3033. 「JOISC 2019 Day2」两个天线

    LOJ#3033. 「JOISC 2019 Day2」两个天线 用后面的天线更新前面的天线,线段树上存历史版本的最大值 也就是线段树需要维护历史版本的最大值,后面的天线的标记中最大的那个和最小的那个, ...

  4. 深拷贝 & 浅拷贝

    浅拷贝: class Professor { String name; int age; public Professor(String name, int age) { this.name = na ...

  5. 另类--kafka集群中jmx端口设置

    # 监控kafka集群 # 有一个问题,需要在kafka-server-start.sh文件中配置端口,有如下三种办法 # 第一种:复制并修改kafka目录,比如kafka-1,kafka-2,kaf ...

  6. xpath下载

    1.下载地址,版本号为 2.0.2: 链接: https://pan.baidu.com/s/1GXPm1kMENXhOkefKcEQnlA 密码: 8wwv 2.安装 1).在chrome右上角找到 ...

  7. vue transtion 实现分析

    这是我用js和css3,实现的vue transition组件相同的效果核心js var btn = document.getElementById('btn'); var box = null bt ...

  8. [CSS] w3c 盒模型 和 IE 盒模型

  9. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  10. im_master_search_specification

    中文 http://accel-archives.intra-mart.jp/2014-winter/document/iap/public_zh_CN/im_master/im_master_sea ...