设置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. [bzoj2288]【POJ Challenge】生日礼物_贪心_堆

    [POJ Challenge]生日礼物 题目大意:给定一个长度为$n$的序列,允许选择不超过$m$个连续的部分,求元素之和的最大值. 数据范围:$1\le n, m\le 10^5$. 题解: 显然的 ...

  2. Confluence与Jira安装及后期迁移问题记录

    Confluence与Jira 由于线上jira和confluence之前互相关联,confluence的登录用户全部关联自jira的用户,confluence安装时会提示是否关联jira,由于这个问 ...

  3. STL priority_queue 常见用法详解

    <算法笔记>学习笔记 priority_queue 常见用法详解 //priority_queue又称优先队列,其底层时用堆来实现的. //在优先队列中,队首元素一定是当前队列中优先级最高 ...

  4. 经验：什么影响了数据库查询速度、什么影响了MySQL性能 （转）

    一.什么影响了数据库查询速度 1.1 影响数据库查询速度的四个因素 1.2 风险分析 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定 ...

  5. T100——英文版凭证报表

    范例:cxrr001 效果:增加英文版报表选择 1.azzi301,复制cxrr001_g01,把样板编号改为cxrr001_g01_01: 2.下载cxrr001_g01的GR样板,把cxrr001 ...

  6. Postgresql在Windows下的解压安装

    1.将下载的压缩包解压,我是解压在D:\postgreSQL\pgsql中. 2.设置环境变量如下: set PGHOME=D:\postgreSQL\pgsql    set PGDATA=%PGH ...

  7. 适配方案（四）适配的基础知识之单位、分辨率、viewport

    适配的基础知识 一.理解单位 px.pt.pc.sp.em.rem.dpr.dp.dip.ppi.dpi.ldpi.mdpi.hdpi.xhdpi.xxhdpi 如果你是ios开发,你需要了解的单位: ...

  8. Hadoop 3相对于hadoop 2的新特性

    相对于之前主要生产发布版本Hadoop 2,Apache Hadoop 3整合许多重要的增强功能. Hadoop 3是一个可用版本,提供了稳定性和高质量的API,可以用于实际的产品开发.下面简要介绍一 ...

  9. 1 sql server中添加链接服务器

    1  链接到另一个sql server 的实例 exec sp_addlinkedserver @server= '服务器的地址',@srvproduct='SQL Server' go 分布式查询中 ...

  10. KTV歌曲播放原理

    歌曲播放原理 一开始要有一个Song类,在类外面定义枚举,在里面放四种状态, 为:已播放,未播放,重唱,切歌 在类里把歌曲名称和路径封装成字段 起初每首歌的状态默认为未播放 通过MadeSongPla ...