px 、em 、rem介绍

已于 2023-05-15 21:26:15 修改
阅读量96 收藏
点赞数
分类专栏： 前端 文章标签： css 前端 javascript
于 2023-05-15 21:25:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58017233/article/details/130692998
版权

PX

px: 像素相对长度单位。像素px是相当于显示器屏幕的分辨率而言的

     px特点：

       IE无法调整那些使用px为像素单位的字体大小

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点：em的值不是固定的

          em会继承父级元素的字体大小

rem

rem是·css3新增的一个相对单位，和em的区别在于使用rem为元素设置字体大小的时候，仍然是相对大小，但相对的是HTML的根元素

简单的概括就是：em相对于父元素，rem相对于根元素<html> 元素

婷宝_知萌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
Vue项目自动转换 px 为 rem的实现方法
01-19
postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。...
px与rem和rpx的换算以及应用场景
ceike的博客
05-13 3648
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。所以,如果html的font-size是16px,则1rem = 16px。如果html的font-size是20px,则1rem = 20px。
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6450
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
楠姐的博客
02-15 2797
CSS中的常见单位区别
px、rpx、em以及rem的区别与用法
yf18040578780的博客
09-11 3800
px、rpx、em以及rem的区别与用法
px、em、rem、rpx 用法 与 区别
唐屁屁
02-21 1374
区分px、em、rpx、rem
px em rem
低眉的博客
09-23 144
px是固定单位 em相对于父元素 rem相对于html根元素 rem原理：rem的本质就是等比缩放，一般是基于宽度
px em rem的区别
weixin_43931898的博客
11-08 353
px px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！可但是！但可是！如果全篇用px布局会暗藏一个尴尬的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。 <!DOCTYPE html> <html> <head&gt...
px em rem vh的使用
weixin_38345306的博客
08-27 131
-绝对单位：px -相对单位：rem,em,% ,vh,vw px 像素，相对于屏幕的分辨率 em 参考父元素的font-size,具有继承性的特点，逐层影响(最终的参考是浏览器的字体大小或设置的字体大小)。浏览器默认是16px 一层：1.4em=1.416px=22.4px 二层：1.2em=1.21.41.6px rem 相对的只有html根元素,可以避免字体大小逐层复合的连锁反应 一层：1rem=16px 二层：2rem=216px vh 相对于视口高度，1vh=浏览器视口高度的1%，1vw=浏览器视
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
scss概念及使用
m0_74293254的博客
07-10 903
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 92
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 84
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css 自定义变量 var()
Z_Wonderful的博客
07-10 134
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
Sass 和 SCSS
ZTBztb123456的博客
07-07 369
Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。
html+css+js随机验证码
w11111xxxl的博客
07-08 925
body {margin: 0;
医院人员管理项目01_下午，css
m0_75257168的博客
07-08 482
行内样式（内联样式）：直接在html中设置。引入html网页中的方式，共3种。内部样式：css代码写在的。
rpx px em rem % vh vw的区别
06-28
px是像素单位，是网页开发中最常用的单位，不具有自适应性。 em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位，也适用于网页开发中的字体大小设置。 %是相...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值