css3开发：rem与px的换算

最新推荐文章于 2024-02-01 21:38:51 发布
最新推荐文章于 2024-02-01 21:38:51 发布
阅读量959 收藏
点赞数
分类专栏： css3开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Generon/article/details/72461402
版权

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：

|  px  |     rem        |
-------------------------
|  12  | 12/10 = 1.2    |
|  14  | 14/10 = 1.4    |
|  16  | 16/10 = 1.6    |
|  18  | 18/10 = 1.8    |
|  20  | 20/10 = 2.0    |
|  24  | 24/10 = 2.4    |
|  30  | 30/10 = 3.0    |
|  36  | 36/10 = 3.6    |
|  42  | 42/10 = 4.2    |
|  48  | 48/10 = 4.8    |
-------------------------

由于rem是css3中的一个属性，很多人首先关注的就是浏览器对他的支持度，我截了一张caniuse对rem属性的兼容表：

sass-px-rem-1

从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了。

Generon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一款px转换rem工具
12-05
解压缩即可使用，使用的时候需要复制css代码到转换栏，然后设定转换条件，便会在右边栏生成转化后的代码，同时也可以生成媒体查询代码，也可以选择不生成
rem to px转换(rem单位转换回px单位)初稿
zhangdaren的专栏
08-10 1352
因为某些原因，需要将rem转回px，而当初的rem相对应的设计稿大小，与现行项目不一致，需要进行转换。 比如原来的设计稿是320px，现在的设计稿是750px，显然再直接用原来的css代码是不合适的，这就涉及到转化，而一个一个手动修改累死人不说，还浪费时间，很不符合程序猿的作风~ 于是想着可以使用正则来替换，下面给出测试代码及正则，方便有同类经历的童鞋使用。 我们先来看看测试css： ....
在线rem与px相互之间的转换器
jiangqinqinmei的博客
11-04 600
https://www.freetechs.cn/tool/rem2px.html 适配刘海屏手机的代码：https://www.cnblogs.com/djjlovedjj/p/13983852.html https://blog.csdn.net/shenxianhui1995/article/details/109113462
rem与px的转换
weixin_30670151的博客
01-03 71
rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号16px，来看一些px单位与rem之...
rem 与px的转换
zhangkeke_的博客
11-12 1529
使用rem代替px，可以使网页随着屏幕大小变化而变化 步骤：1，引用JS文件，如图2所示，调用 1，引用JS文件（以下是remConfig.js）   export default function(){ var deviceWidth = document.documentElement.clientWidth || window.innerWidth var whdef = ...
postcss-pxtorem:px转rem，基于postcss
05-09
需要把css文件里面的px换算成rem就行。 而不需要在切图的过程中换算成rem。 安装 git clone git@github.com:Aralic/postcss-pxtorem.git 初始化 npm install node index.js init 当前目录生成pxtorem.json 配置文件 ...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
css中的px、em、rem、pt 特点和区别及换算详解
12-09
1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，...
CSS px,rem关系转换换算
01-16
懒人推动进步，简化px,em,rem的换算
rem.zip_REM_painbt3_rem单位换算_whisperedzvw
09-24
标题“rem.zip_REM_painbt3_rem单位换算_whisperedzvw”暗示了这个压缩包可能包含一个或多个文件，这些文件与使用"rem"单位进行移动设备上的单位换算有关。"painbt3"和"whisperedzvw"可能是项目名称或者某种特定的...
将px转换为rem的工具px-rem.zip
07-18
1. 将静态文件中的 px 转换为 rem 的工具2. 作为一个 webpack loader，实时转换 标签：pxrem
rem与px转换
weixin_43012505的博客
07-07 248
//rem换算 function fontSize(res){ let docEl = document.documentElement, clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; if (!clientWidth) return; //设计稿为1920 let fontSize = 100 * (clientWidth / 192
px转rem
qq_43653325的博客
04-27 98
使用pxtorem px转成rem yarn add lib-flexible 在main.js引入中：import ‘lib-flexible/flexible.js’ yarn add postcss-pxtorem 在vue.config.js里面. module.exports = { lintOnSave: false, devServer: { port: 777...
用 JavaScript 实现 rem 和 px 的互相转换
最新发布
narukeu的博客
02-01 902
可视化大屏往往会用到 ECharts，且可视化大屏也往往需要适配不同的屏幕分辨率。在使用 ECcharts 时，我们会发现它不支持 rem 作为大小属性的单位，只支持 px。但是我们在 CSS 中习惯使用 rem 实现自适应。这就需要在 JavaScript 编写一个函数，用于实现 rem 和 px 单位的互相转换。这个函数可以自动获取根元素的字体大小，这样省去了手动定义的步骤。
CSS：移动端rem与px的转换
努力努力再努力w
09-26 395
px 相对于显示器屏幕分辨率 rem 相对的是HTML根元素 （ 一般默认根元素的font-size为16px , 那么就是 1rem = 16px ） 目的是自适应各种移动端 目前除了低版本IE，各浏览器都已支持 实际使用中转换 1.VS中的插件：cssrem 安装完成后，可在file-preferences-setting中调整根元素的font-size (手动调整换算比例) 2.les...
rem是怎么计算的
qq_38473364的博客
02-25 2244
rem怎么计算
rem 响应式页面字体设置
weixin_39888214的博客
04-08 456
// “()()”表示自执行函数(function (doc, win) {  var docEl = doc.documentElement,    // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize      resizeEvt = 'orientationchange' in window ? 'orientation...
html中rem单位的转换,rem换算(rem与px换算工具)
weixin_28972529的博客
06-03 7577
哪位大神，能告诉我，rem和px是怎么换算的？然后怎样用rem布局？？我就。需要自己设置，一般是1rem=14px，单位和px的布局是一样的，只是单位不同而已，所以不必纠结px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是. 为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使.rem单位详解：rem是相对长...
rem与px之间的转换
热门推荐
weixin_41970780的博客
11-17 1万+
rem与px之间的转换 最近一直在写app，那今天就说一下rem与px之间的转换。 rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算 例如： html{ font-size:16px;} 那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成r
rem与px换算的计算方式
05-26
要进行 rem 与 px 的换算，需要知道根元素的字体大小。通常情况下，根元素的字体大小为 16px。因此，1rem 等于 16px，2rem 等于 32px，以此类推。 例如，如果想将一个元素的宽度设置为 200px，可以使用以下 CSS： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值