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. js数据结构与算法——集合

    <script> function Set(){ var items = {};//使用对象表示集合,因为js对象不允许一个键指向两个不同的值,保证集合里面的匀速唯一性 this.add ...

  2. FreeRTOS如何结束和重新启动调度程序

    大多数主机或桌面系统(比如Linux,Mac或Windows)都有一个正常的用例,你可以在早上启动操作系统,然后在晚上关闭它,然后你就离开机器.嵌入式系统是不同的:他们没有参加,他们应该“永远”运行. ...

  3. PHP获取服务器IP和客户端IP

    <?php echo '前端机IP:'.$_SERVER['REMOTE_ADDR']; echo '<br />'; echo '后端机IP:'.$_SERVER['SERVER_ ...

  4. django.db.utils.OperationalError: cannot ALTER TABLE "servers_ecs" because it has pending trigger events

    数据库:postgresql9.4 原因:这是因为数据库的字段原来可以为null,现在改变该字段为not null,而你的数据库有数据,而这些数据该字段已经为null

  5. Selenium 常用API

    浏览器相关操作 启动浏览器 driver = new ChromeDriver(); 控制浏览器窗口大小 maximize() 设置浏览器最大化 setSize() 设置浏览器窗口的宽与高 访问网页 ...

  6. Helm - Kubernetes服务编排的利器

    Helm介绍 在Kubernetes中部署容器云应用(容器或微服务编排)是一项有挑战性的工作,Helm就是为了简化在Kubernetes中安装部署容器云应用的一个客户端工具.通过Helm能够帮助开发者 ...

  7. Web API之基于H5客户端分段上传大文件

    http://www.cnblogs.com/OneDirection/articles/7285739.html 查询很多资料没有遇到合适的,对于MultipartFormDataStreamPro ...

  8. Oracle-分析函数之sum(...) over(...)

    概述 Oracle函数 很久之前更新了一篇Oracle的函数博文http://blog.csdn.net/yangshangwei/article/details/51425458,分析函数并没有包括 ...

  9. UML绘图工具——PlantUML

    1 简介 PlantUML是一个开源项目,支持通过简单直观的语言来定义以下UML图. 时序图 用例图 类图 活动图 组件图 状态图 对象图 部署图 定时图 支持生成图片格式有: PNG SVG LaT ...

  10. zabbix企业级监控dell硬件服务状态

    监控dell服务的硬件状态,一般有两种方式 第一,在操作熊上安装OMSA,编写脚本调用omreport命令进行监控 第二.使用IDRAC,只需开启在IARAC上的SNMP,zabbix通过snmp进行 ...