1rem 换算成的像素值等于 html 元素的 font-size 值

如果 设置 html 的 font-size 为 100px, 那么设计稿的 像素转换成 rem 只需要除以 100 即可。

function setRem(designWidth, maxWidth) {
var htmlElm = document.documentElement;
var pageWidth = htmlElm.getBoundingClientRect().width;
pageWidth = Math.min(pageWidth ,maxWidth || designWidth);
var rempx = 100*pageWidth/designWidth;
htmlElm.style.fontSize = rempx+'px';
document.body.style.fontSize = '0.16rem'; //16px
} setRem(750,1920) //pc
setRem(750,680) //mobile

vw 与 rem 混合使用:

如果使用 vw 作为单位,那么 设计稿的 100px 换算 vw 就是  100/(desiginWidth/100) vw ,

设置  html 样式 font-size:100/(desiginWidth/100) vw, 那么设计稿上像素转换成 rem 也是除以 100 即可. 这个方法甚至不需要 js 来动态设置 html 的 font-size.

一种简单的 rem 单位基准设置的更多相关文章

  1. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  2. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  3. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  4. WebApp开发之--"rem"单位(转)

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  5. 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  6. rem单位怎么使用

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  7. 如何在手机项目中使用rem单位

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  8. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  9. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

随机推荐

  1. springboot 中页面跳转问题:window.location.href

    我的一个HTML页面 点击注册 本该到注册页面,但是却一直跳到同目录的一个Error.html文件夹下 该页面: 删掉Error.html还不行:会报错,而且改变window.location.hre ...

  2. P2419 [USACO08JAN]牛大赛Cow Contest(dfs走天下/)

    题目描述 FJ的N(1 <= N <= 100)头奶牛们最近参加了场程序设计竞赛:).在赛场上,奶牛们按1..N依次编号.每头奶牛的编程能力不尽相同,并且没有哪两头奶牛的水平不相上下,也就 ...

  3. U盘安装Mac OS X要点

    1.启动U盘必须比系统磁盘小,因为制作启动U盘,U盘很可能被当成系统盘.系统安装时,发现系统盘比U盘小,很可能提示安装失败. 2.制作启动U盘.详情查看官网:https://support.apple ...

  4. 拦截请求并记录相应信息-springboot

    方式: 1.FIlter过滤器 2.interceptor拦截器 3.Aspect切片 一.Filter过滤器形式 只能处理request中的数据  不能确定请求要走的是哪个controller信息 ...

  5. UI---设置Activity背景为透明

    1.在values下colors中设置透明颜色 <?xml version="1.0" encoding="utf-8"?> <resourc ...

  6. buildah---github简单记录

    github里着重讲了buildah和podman的区别: buildah对标的是dockerfile的脚本化代替执行. podman对标的是docker命令的代替. gihub地址: https:/ ...

  7. AES CBC PKCS7 C# C++

    c++算法见:https://blog.csdn.net/csdn49532/article/details/50686222 c#:https://gitee.com/koastal/codes/6 ...

  8. XML数据读取——Digester简单使用

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  9. C++何时需要NEW对象,new和定义对象的区别

    C++何时需要NEW对象 一.CString str; 不用new的内存区域是在栈,会自动分配空间,一般在局部变量时使用,函数结束后会自动释放空间, 定义对象就是申明对象(静态) str有系统创建并释 ...

  10. 启动nginx报错问题

    为了解决生产环境的bug,模拟生产环境,我使用了nginx,在安装启动的过程中,出现了很多问题. 1.nginx下载地址 http://nginx.org/en/download.html 这是ngi ...