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. 蓝盾杯writeup

    由于比赛时只给了内网,web题目无法复现,这里就简单写一下misc的部分题目 1.眼花了吗 (默默吐槽居然是来自实验吧的原题) 提示:当眼花的时候会显示两张图,可以想到应该是包含双图的情况 用fore ...

  2. CentOs7.5安装PostgreSQL11

    前言 本章介绍在CentOs上安装一个PostgreSQL数据库 下一篇可能是安装 Redis 本篇使用的服务器是已经安装过Python/Nginx等常用软件的环境,因此在安装过程中可能会遇到按照本章 ...

  3. es6 总结知识点

    1. let  和 const 只在代码块中有效  {}   js块级作用域. const 定义的对象是可以改变其属性的 const a =[], b={} ; a.push(1); b.a=1; / ...

  4. uni-app版本在线更新问题(下载完成安装时一闪而过,安卓8以上版本)

    我使用的是uni-app插件市场https://ext.dcloud.net.cn/plugin?id=142 出现一闪而过时加入权限 <uses-permission android:name ...

  5. LoadRunner脚本准备

    脚本录制1.启动LoadRunner2.打开VuGen在LoadRunner Launcher窗格中,单击创建/编辑脚本3.创建一个空白Web脚本在“新建虚拟用户”对话框里选择新建脚本的协议一般选择W ...

  6. 1、阿里云ECS内部机器端口被100.117.90段的ip疯狂扫描导致业务异常

    故障现象: 解决方案: 1.临时解决 iptables -I INPUT -s 100.117.0.0/12 -j DROP 2.后续解决 提交工单,寻找阿里服务. 后续定位是以前配置过的SLB在搞鬼 ...

  7. 使用Postman测试https接口时的小问题记录

    测试本地的WebApi接口时,接口是https,自己写的用httpclient测试是可以的, 用postman一直连接不了.原因正是由于https,不过postman在界面上已经给出了可能的原因和解决 ...

  8. centos7设置httpd

    1.httpd开机自启动 systemctl enable httpd.service 2.httpd开机不自启动 systemctl disable httpd.service 3.启动httpd ...

  9. 记一次物理机安装centos7.5 出现黑屏的问题

    记一次物理机安装centos7.5 出现黑屏的问题 一.问题出现 使用物理机安装centos7.5,选择Install CentOS Linux7之后,并没有出现选择语言的界面,而是只出现了一个鼠标, ...

  10. .Net Framework 下运行项目提示.dll类库程序集未能加载

     咨询个问题..项目可以生成成功,运行时总提示未能加载程序集,而且这个程序集就是当前webApi项目的dll,这是怎么回事.. 还一个奇怪的现象,刚开始报缺失xxx.dll, 那个dll是本解决方案里 ...