rem与px的转换

最新推荐文章于 2023-05-13 13:49:24 发布
最新推荐文章于 2023-05-13 13:49:24 发布
阅读量479 收藏 1
点赞数
分类专栏： IT开发 文章标签： rem rem与px转换 px
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyamay/article/details/93225758
版权
  • rem是CSS3中新增加的单位值
  • rem和em都是相对单位
    rem和em的不同点：

1.em是相对于元素的的父元素的font-size进行计算。
缺点：当父元素多层使用font-size时，可能会带来无法预知的错误。
2.rem是相对于根元素html的font-size进行计算。
rem和em的区别说完后，就介绍rem和px之间的转换吧。（带着愉快的心情去了解吧，欧耶）
px和rem之间的转换关系：（假设使用的浏览器默认的字号是16px）

pxrem
1212/16=0.75
1414/16=0.875
1616/16=1
1818/16=1.125
2020/16=1.25
2424/16=1.5
3030/16=1.875
3636/16=2.25
4242/16=2.625
4848/16=3

如果你要设置一个不同的值，那么需要在根元素 <html>中定义，为了方便计算，时常在<html>元素中设置font-size值为62.5%。

    html{
    	font-size:62.5%; /*      (10/16)*100%=62.5%    */
    	}

相当于在html中设置font-size为10px；此时转换关系值就有所改变

pxrem
1212/10=1.2
1414/10=1.4
1616/10=1.6
1818/10=1.8
2020/10=2
2424/10=2.4
3030/10=3
3636/10=3.6
4242/10=4.2
4848/10=4.8

我们可以用除法公式来记 被除数÷除数=商（a÷b=c）
被除数是：要设置的字体大小
除数是：html中的font-size值
商就是：rem啦
总结为：要设置的字体大小÷html中的font-size值=rem

如有错误，还望订正，谢谢。

liyamay
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem与px换算的计算方式
weixin_30335353的博客
01-19 2132
前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局，项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊！！结合这次这个小项目，我觉得我也有必要对rem布局以及用法进行一次总结。 ps.文笔可能不太好... 1.什么是rem 来自于鹅厂ISUX团队的解释如下：rem（fontsizeoftherootelement）是指相...
rem 与 px 换算关系
杏子
05-05 2万+
一、前言 响应式开发是现在前端潮流的开发方式，说到移动端的响应式开发，不得不说到一个单位 rem，那么 rem 单位是什么，有什么好处，与 px 单位有什么关系？ 二、rem 概念 rem 是所有 DOM 节点对于根节点 html 的相对值。 三、rem 特点与换算 1. 浏览器默认的字号是16px，因此如果没有设置根节点 html 的字号，这将会是一个默认基数。 2. rem 与 p...
前端怎么把px单位换成rem单位解决项目页面适配问题
qq_920189602的博客
10-20 1万+
使用案例简单明了说明怎么把px单位换成rem单位，达到适配使网页自适应，简要说明rpx、px、rem、em的区别
vue 移动端H5 布局 rem（postcss-px2rem）
qq_39939748的博客
01-10 942
vue 移动端H5 布局 rem（postcss-px2rem）
px与rem和rpx的换算以及应用场景
ceike的博客
05-13 3741
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。所以,如果html的font-size是16px,则1rem = 16px。如果html的font-size是20px,则1rem = 20px。
CSS单位px、em、rem及它们之间的换算关系
WangMin@汪末末
09-20 4186
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者的区别与优势是什么？接下来我们就来学习一下吧！ 单位px、em、rem分别表示什么？ 1、 px(Pixel) 相对于显示器分辨率而言，表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（这里的像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下： IE无法调整
一款px转换rem工具
12-05
该工具名为“px转换rem工具”，是一个便捷的小程序，用于帮助开发者快速、高效地进行单位转换。解压缩下载的“rem工具”文件后，您会发现一个简洁的界面，无需安装，直接运行即可开始使用。 工具的核心功能在于将...
Vue项目自动转换 px 为 rem的实现方法
01-19
postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。...
rem 转 px html
03-10
rem转px
gulp-px2rem-plugin：将px转换成rem
02-03
用rem来做响应式开发的时候，将px转换成rem值的时候，是每一个程序员头大的事情。 起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。但是，我们能感知的长度大小，还是可以，全部...
rem与px的转化
weixin_43588942的博客
05-05 310
方法1： 方法2： (function(win,doc){ function change(){ doc.documentElement.style.fontSize = 100*doc.documentElement.clientWidth/375+‘px’; } change(); win.addEventListener(‘resize’,change,false); })(window...
rem等于多少px?
weixin_45753820的博客
02-24 1038
在根标签设置字体大小为250px，1rem=250px,2rem=500px。rem就是根元素的字体大小单位。
样式尺寸rem转px
qq_45808741的博客
06-23 369
rem转px工具方法
Rem与Px的转换
热门推荐
huang100qi的专栏
06-10 4万+
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 Rem的使用 前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的
CSS3中的rem,em与px间的换算关系
Monster_G的博客
01-16 5553
px,em,rem之间有什么区别？国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem，那三者之间有什么区别？又各自有什么优劣呢？
px转换rem方式
weixin_43802583的博客
11-30 1万+
px转换rem方式： 一、定义scss函数进行转换 @function px2rem($px) { @return px/px/px/design-width*10+rem; //对应js } 调用此函数就可转换px 二、使用vscode插件 css rem px to rem 三、口算 ...
rem、em、px的区别
m0_66783294的博客
05-13 2118
rem、em、px的区别 1.px像素（pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位 2.em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸，它会继承父级元素的字体大小，因此并不是一个固定的值 3.rem是css3新增的一个相对单位（root em，根em'），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 4.区别： IE无法调
rem与px换算
weixin_40365953的博客
09-19 3687
html标签的font-size=69px（根据rem自适应算法得到的） UI给的字体大小为14px 我想得到这14px等于多少rem 14px÷69px得到0.2rem 所以rem与px换算是根据html标签的font-size进行比率换算的...
app移动端 rem和px的换算
weixin_38373875的博客
03-05 1690
rem.js文件 /** * Created by zhaolele on 2018/7/25. */ (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recal...
通过媒体查询转换rem与px
最新发布
05-20
在响应式设计中，我们通常使用媒体查询来根据不同的设备尺寸和分辨率来调整网站的布局和样式。同时，我们也可以使用媒体查询来转换rem与px单位。 首先，我们需要在根元素(html)中设置基准字体大小。例如，我们可以将基准字体大小设置为16px： ```css html { font-size: 16px; } ``` 接下来，我们可以使用媒体查询来根据不同的设备尺寸和分辨率来调整基准字体大小。例如： ```css @media screen and (max-width: 768px) { html { font-size: 14px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { html { font-size: 15px; } } @media screen and (min-width: 1024px) { html { font-size: 16px; } } ``` 在这个例子中，我们使用三个媒体查询来分别设置不同设备尺寸下的基准字体大小。当屏幕宽度小于等于768px时，基准字体大小为14px；当屏幕宽度大于768px且小于等于1024px时，基准字体大小为15px；当屏幕宽度大于1024px时，基准字体大小为16px。 接下来，我们可以使用rem单位来设置其他元素的字体大小、宽度、高度等属性。例如，我们可以将一个元素的字体大小设置为1.5rem： ```css .element { font-size: 1.5rem; } ``` 这里的1.5rem实际上是相对于根元素(html)的基准字体大小而言的。如果根元素的基准字体大小为16px，那么1.5rem就相当于24px。 如果我们需要将px转换成rem，我们可以使用以下公式： ``` rem = px / 基准字体大小 ``` 例如，我们想将一个元素的宽度从100px转换成rem，假设根元素的基准字体大小为16px，则可以这样计算： ``` rem = 100px / 16px = 6.25rem ``` 因此，我们可以这样设置元素的宽度： ```css .element { width: 6.25rem; } ``` 这样，在不同设备尺寸下，由于根元素的基准字体大小不同，元素的宽度也会自动适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值