学习记录：px、em和rem

最新推荐文章于 2024-08-10 22:43:21 发布
最新推荐文章于 2024-08-10 22:43:21 发布
阅读量78 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37992222/article/details/114392346
版权

px、em、rem

  • px：绝对单位，页面按照精确的像素值来展示，浏览器默认字体大小为 16px
  • em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 则按自身来计算，整个页面内1em 并不是一个固定的值
  • rem：相对单位，可理解为 “root rem”，相对于根节点 html 的字体大小来计算，css3新增属性，IE8-不支持

em特点：

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小

rem特点：

  • 相对于根元素计算，可用于响应式的页面
YoHoo-2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS：如何使用px、em、rem？
waiting677的博客
01-22 1213
目录 1. 三种单位详解 1.1 px（像素Pixel） 1.2 em 1.2.1 浏览器默认16px 1.2.2font-size继承特性 1.2.3margin和padding 3. rem（root rem） 2. 应用场景 2.1 通用准则 2.2 em与rem 1. 三种单位详解 1.1 px（像素Pixel） 相对长度单位。像素px是相对于显示器屏幕...
一次搞懂CSS字体单位：px、em、rem和%
web前端开发教程htmlcssjs
12-17 268
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。 “网页”和“印刷”的单位 若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行...
px和em和rem的区别
叶子yes的博客
07-21 449
可以看出padding变成了28px，所以em设置的值不是固定的，会随当前元素的字体大小的变化而变化。可以看出，padding仍然是20px，所以rem相对的是html元素的字体大小而言的。px是像素单位，是相对屏幕宽高度而言，一旦设定就无法随浏览器尺寸的改变而改变。可以看出默认1em=16px（因为默认字体大小为16px）rem也是一个相对长度单位，相对的是html元素的字体大小而言的。示例设置padding为30px，宽高100px。em是相对长度单位，相对当前元素的字体大小而言。...
px和em和rem区别
lv_suri的博客
07-14 677
单位概述：px:是像素的意思em:相对于父级的font-size值rem:相对于html标签的font-size值使用rem设置移动端页面尺寸特点：设备尺寸不同，可以通过设置百分比解决，设置百分比计算繁琐
浅谈px，em和rem
A_Common_Man的博客
07-17 983
图文详解em，理清em与rem的关系
html em px,一次搞懂CSS字体单位：px、em、rem和%
weixin_29515393的博客
06-17 259
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位(px、em、rem…等)，这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行设计...
CSS: em和rem
CSPsy的博客
04-25 1097
CSS em和rem的使用，什么是em，什么是rem，em和rem的区别，什么时候用em，什么时候用rem
CSS中 px、em、rem区别
神盾局码农
07-22 1367
在css中单位长度用的最多的是px、em、rem，这三个的区别是： 一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个
html里字体单位rem,常用的CSS 字体单位：px、em、rem 和 % 看这篇就够了
weixin_30597089的博客
06-09 447
对于绘图和印刷而言，「单位」相当重要的，然而在网页排版里，单位也是同样具有重要性，在CSS3 普及以来，更添加了一些方便好用的单位( em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在工作上能使用的更加得心应手。相关文章推荐：01 「网页」和「印刷」的单位目前我们接触的范围来说，若要把单位做区分，最简单可以分为「网页」和「印刷」两大类，通常对于CSS来说只会应用到网...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，...
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
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是三种常用的长度单位，它们各有特点，适用于不同的场景。 **px（像素）**是最常见的单位，表示的是物理像素，它是相对于显示器分辨率而言的。使用px定义的元素大小在任何设备上都将保持不变，因此对于...
界面控件DevExpress WinForms，支持HTML & CSS提升用户体验（二）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-07 368
本文主要为大家介绍界面控件DevExpress WinForms支持的HTML & CSS，欢迎下载最新版体验~
css学习
polarisya的博客
08-07 169
【代码】css学习。
如何使用css写三角形
最新发布
z16638522031的博客
08-10 84
在这个示例中，我们首先创建了一个名为.parent-element的div元素，然后通过:before伪元素在其上方创建一个向下指向的黄色三角形。通过调整top值和边框宽度，你可以根据需要自定义三角形的大小和位置。你可以使用一个div元素，然后将其宽度和高度设置为0，接着定义透明和实色边框来实现三角形的形状。根据你需要的三角形样式（例如朝向、大小、颜色等），你可以调整边框的宽度和颜色。这种方法类似于第一种方法，但它允许你在现有的HTML元素上添加三角形形状，而不是使用一个单独的div元素。
使用tailwindcss轻松实现移动端rem适配
felix_alone2012的博客
08-10 201
本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 611
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值