设置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. 剑指offer7: 斐波那契数列第n项（从0开始，第0项为0）

    1. 题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 2. 思路和方法 斐波那契数列(Fibonacci sequen ...

  2. OpenVZ平台 Google BBR加速

    前言  一直以来用的都是搬瓦工的VPS,不得不说比国内那些大厂的性价比高得不知道哪里去了.  当做梯子来用的话搬瓦工年付19.9美元的方案就够用了,网上还有一些官方优惠码(折扣6%: BWH1ZBPV ...

  3. PHP会话(Session)实现用户登陆功能

    对比起 Cookie,Session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制,本文简单介绍 Session 的使用. 由于 Session 是以文本文件形式存储在 ...

  4. docker-Overlay原生网络

    节点1/键值存储:192.168.50.130 :192.168.50.131 1.下载Consul二进制包并启动 wget https://releases.hashicorp.com/consul ...

  5. Codeforces 1236A. Stones

    传送门 注意到两种操作都要消耗中间的石头,并且两种操作每次都会得到 $3$ 个石头 那么显然优先做操作二是最优的,因为操作二只会消耗中间堆的一个石头 如果有剩下再进行操作 $1$ ,那么可以保证总操作 ...

  6. thymeleaf 模板使用 之 前台界面获取后台属性值

    使用Thymeleaf模板时,如果需要在js中获取后台传值,那么需要用内联JS写法获取 [姿势很重要] 一.后台通过Model的addAttribute方法向前台传值 1.js获取后台属性值(--内联 ...

  7. tomcat 虚拟目录 连接池

  8. Winform_chart控件_心得

    效果图: 1.首先,在工具箱找到chart控件,拖到窗体中. 2.关于chart控件的细节设计: series集合设计: chartType可以选择折线图.柱状图.圆饼图等等. isValueShow ...

  9. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  10. 【原创】大叔案例分享（5）id打通

    经常有一些需要做id打通的场景,比如用户id打通等, 问题抽象是每条数据都可以解析出一个或多个kv pair:(id_type,id),然后需要将某一个kv pair匹配的多条数据进行merge: 比 ...