px和rem的区别？rem如何做适配?

已于 2023-10-22 17:39:57 修改
阅读量306 收藏
点赞数
分类专栏： CSS 文章标签： 前端 css3 css
于 2023-10-12 15:17:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59068526/article/details/133791321
版权

目录

1.概念

2.rem适配

3.举例说明

1.概念

        px：像素，显示器上给我们呈现的画面的像素，每个像素大小一样，它是绝对单位长度。

        rem：相对于html根节点的 font-size 的值，它是相对单位长度。

2.rem适配

        rem是相对长度，相对于根元素（HTML）的 font-size 的属性来计算大小，通常来做移动端的适配，rem是根据根元素 font-size 计算值的倍数。      

3.举例说明

        HTML上的 font-size:16px，给div设置宽为1.2rem，那么：

        1.2rem = 16px * 1.2 = 19.2px

码农babyQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem、em、px的区别
m0_66783294的博客
05-13 2106
rem、em、px的区别 1.px像素（pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位 2.em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸，它会继承父级元素的字体大小，因此并不是一个固定的值 3.rem是css3新增的一个相对单位（root em，根em'），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 4.区别： IE无法调
rem 和px的区别
xingmengIT的博客
09-03 319
以下为一种是利用javascript来控制元素的font-size: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', r...
rem 与 px 换算关系
杏子
05-05 2万+
一、前言 响应式开发是现在前端潮流的开发方式，说到移动端的响应式开发，不得不说到一个单位 rem，那么 rem 单位是什么，有什么好处，与 px 单位有什么关系？ 二、rem 概念 rem 是所有 DOM 节点对于根节点 html 的相对值。 三、rem 特点与换算 1. 浏览器默认的字号是16px，因此如果没有设置根节点 html 的字号，这将会是一个默认基数。 2. rem 与 p...
CSS单位px、em、rem及它们之间的换算关系
WangMin@汪末末
09-20 4123
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者的区别与优势是什么？接下来我们就来学习一下吧！ 单位px、em、rem分别表示什么？ 1、 px(Pixel) 相对于显示器分辨率而言，表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（这里的像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下： IE无法调整
彻底弄懂css中单位px和em,rem的区别
weixin_30267691的博客
04-13 842
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏...
简述px、rem、em三者的区别
lxy_lxy_lxy66的博客
03-23 518
简述px、rem、em三者的区别1、 px（像素、固定单位）：2、em（相对单位长度）3、rem（相对单位长度）总结 1、 px（像素、固定单位）： IE无法去调整那些以px为像素单位的字体的大小 ，则px是固定的（一般在pc端进行布局的时候是比较常用的）； 国外的大部分网站能够调整字体的大小是因为其使用rem或者是em来作为字体的单位； Firefox能够调整px、rem、em； 2、em（...
vue中的适配px2rem示例代码
10-17
1. 安装 `lib-flexible` 和 `px2rem-loader`。 2. 在 `main.js` 中引入 `lib-flexible`。 3. 在构建配置中添加 `px2rem-loader` 到 CSS 加载器，并设置 `remUnit`。 4. 使用 `px` 编写样式，运行时会自动转换为 `rem...
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
详解vue2.0 不同屏幕适配及px与rem转换问题
08-27
主要介绍了详解vue2.0 不同屏幕适配及px与rem转换问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
px、em 和 rem 三者区别
cbkting的博客
02-18 9381
px、em 和 rem 三者有什么区别? PX px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是有大部分的国...
px和em和rem区别
lv_suri的博客
07-14 670
单位概述：px:是像素的意思em:相对于父级的font-size值rem:相对于html标签的font-size值使用rem设置移动端页面尺寸特点：设备尺寸不同，可以通过设置百分比解决，设置百分比计算繁琐
rem和em和px
mxclsh的博客
12-24 1990
默认字体16px； px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 em的值并不是固定的； em会继承父级元素的字体大小。 rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大...
Rem与Px的转换
热门推荐
huang100qi的专栏
06-10 4万+
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 Rem的使用 前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的
区别css单位px、em、rem
七侠剑客的博客
06-12 6209
在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解： em与px转换 一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认 （1em=16px）的长宽)： <!DOCTYPE html> <html la...
px、em、rem、rpx 用法 与 区别
宁静致远
12-11 3万+
PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前...
css中单位px和em,rem的区别
webxiaoma
12-02 1449
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？         PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内
px,em,rem的区别
滴水石穿
01-18 2648
它们都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化   在我们写代码的过程中，经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸大小的单位，今天将要为大家详细介绍在CSS中常见的尺寸单位名称及其用法，具有一定的参考价值，希望对大家有所帮助。 【推荐课程：CSS教程】 px px 是 pixel 的缩写，...
rem,em,px区别
cuteyDan的博客
02-26 258
rem,em,px区别   1. px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。　2. em是相对长度单位。相对于父级字体尺寸，会叠加（继承父级元素字体大小）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。 例:&lt;p id="fu"&gt; 福&lt;span id="qi"&gt;气&lt;/span&gt; &lt...
EM vs REM vs PX，为什么你不应该”只用px“”
weixin_30443731的博客
04-27 125
Actually this artical is from other person's opnion ,i just put it into chinese,and this means a very big progress for me.Because today i am going to start my front-end way in blog,means everyday i ...
rem和px怎么换算
最新发布
11-15
rem是相对于根节点html的字体大小而言的，而px是绝对单位。因此，我们可以通过设置根节点html的字体大小，来实现rem和px之间的换算。具体来说，1rem等于根节点html的字体大小，而1px等于1/16的根节点html的字体大小。因此，我们可以使用以下公式进行换算： px = rem * 根节点html的字体大小 / 16 举个例子，如果根节点html的字体大小为16px，那么1rem就等于16px，而4rem就等于64px。如果根节点html的字体大小为12px，那么1rem就等于12px，而4rem就等于48px。 需要注意的是，如果设置根节点html的字体大小小于12px，那么浏览器会将其自动调整为12px，因此换算后的px值也会按照12px计算。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值