CSS的单位和应用场景及Rem的设置

最新推荐文章于 2025-05-26 10:48:05 发布
原创 最新推荐文章于 2025-05-26 10:48:05 发布 · 501 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS单位及应用场景

本文详细解析了网页布局中常用的单位px、em、rem及小程序特有单位rpx的特性与应用场景。px为绝对单位，em和rem为相对单位，分别相对于父元素和html根元素；rpx则是小程序中的相对单位，1rpx等于0.5px。文章还提到了不同单位在代码成本、页面复杂度及浏览器兼容性方面的考量。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

对于px，em，rem的理解

pxemremrpx
绝对单位相对单位相对单位绝对单位
独来独往，棱角分明，一就是一，二就是二，1px就是显示器上的1像素听从父元素的，没有半点主张听html的，下面所有的元素都听html的1rpx就是显示器上的0.5px
px单位的代码成本比较高页面层级比较复杂时候不适合用注意浏览器的兼容性小程序独有
一般用于网站的搭建H5网页H5网页小程序

总结：各有用途，看需要做什么。
rem浏览器兼容性：
IE9以上等支持CSS3的浏览器是肯定的可以支持的，如果想要兼容IE低版本，那可以考虑针对IE9以下低版本浏览器，用px来实现
1rem = 16px
1px = 2rpx

CSS相对定位3大应用场景5个实战应用案例详解
艾编程带你学前端博客
12-09 569
我发现，作为学习Web前端开发的同学最大的痛苦莫过于，学了一堆知识，但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货，一个个来讲清楚关于定位系列实际应用场景，先从相对定位position: relative;开始相对定位3大应用场景：微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例：搜索框、图文对齐、滑动动画、弹性菜单、柱形图正在上传…重新上传取消定位作为css中非常重要的一个知识点，在实际开发中那就像家常菜一样，时时都会出现，同时在面试中也是200%会被问到的。
CSS中的单位re和rem及他们的一些使用场景
weixin_42185100的博客
07-18 1392
Table of Contents em 和 rem 及他们的使用方法 关于 px em 示例一 示例二 示例三 示例四 rem 总结 em 和 rem 及他们的使用方法 在介绍 em 和 rem 之前，想简单介绍一下 px（这里指的是 CSS 中的 px，请先记住这一点。如果你 已经对 px 有所了解可以直接跳到第二节阅读）。我们知道 px 是一個绝对单位，绝对单位的意义就 好比坐标系中的原点，在确定了（0, 0)位置之后，我们才能得知坐标（x，y）所表示的位 置。同样这里的 1px 的意义就
[CSS3]rem移动适配
最新发布
.
05-26 1520
什么是移动端适配?让页面的元素在屏幕尺寸变化时, 同比放大或缩小移动适配的方案rem：目前多数企业在用的解决方案vw/vh：未来的解决方案。
css content 应用场景
supming1的专栏
12-27 837
1、content 插入内容 :after{                content : "内容"; } 2、content 插入图片 :after{     content  : url(1.png)； }  content 插入图片可插入音频和视频，但目前并没有得到浏览器的支持 3、获
CSS：Rem的用法
qq_42034498的博客
12-13 690
rem：相对于根元素缩放，设定根元素的字体大小，在不同屏幕尺寸下，其他元素对应显示不同的字体大小。 em：继承父级的字体大小。 rem的使用： 1）设置根元素的字体大小 浏览器默认的字体大小为16px，跟元素<html>设置 font-size: 62.5%; 相当于页面font-size定义为10px （16px * 62.5%  =  10px）； html { ...
CSS 的多种背景及使用场景和技巧
Memory1011的博客
11-02 187
转自：http://www.pinlue.com/article/2020/09/0111/1811160975550.html
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1035
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
CSS3 px 和 em 和 rem
08-14
本文将深入探讨CSS3中的单位px、em和rem，它们都是用来定义元素尺寸的重要工具，但各有其特点和应用场景。 首先，我们要理解像素（px）单位。像素是屏幕上的最小显示单位，通常用于创建精确的布局。当你设置一个...
css基于媒体查询和 rem 的响应式布局实践
09-22
CSS3为解决这一问题提供了强大的新工具，即媒体查询和rem单位，使我们能够构建出更加灵活和可维护的响应式布局。 媒体查询（Media Queries）允许我们根据不同的媒体条件，比如视口宽度（viewport width）或设备方向...
神奇的REM单位
m0_72030584的博客
05-14 753
神奇的REM单位：相对于根的测量魔法
CSS3中新增单位rem、em、vh、vw等的用法
jenreal的博客
05-27 604
以前刚接触前端的时候，用来控制大小的单位大家都习惯用像素（px），但是随着时代的进步，响应式布局和跨平台设备的web应用已经成为主流，再使用像素单位来控制大小就有点捉襟见肘了。这时候，很多更为灵活的具有百分比性质的单位逐渐替代了像素单位。 现如今，浏览器都允许用户重新设置文字的大小，如图： 但是很多网页在body的样式上直接写死了文字大小，比如为14px或者16px，这样用户修改浏览器的字号是没法改变网页文字大小的，这对视力不好的人很不友好啊。 如图，看看你有这种坏习惯吗？还设置文字居中，这个前端不合格！
CSS-rem的使用
qq_39285660的博客
01-18 1068
了解em em 的计算是基于父级元素的font-size,有复杂的层级关系，不做考虑了。重点rem（ root element） rem相对的是根节点html的font-size（ rem是css3中新增加的一个单位值， 它绕开了复杂的层级关系，实现了类似于em单位的功能。）什么时候用 rem？ 是不是在所有地方都去使用呢？别捉急，通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些
CSS——rem
热门推荐
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
移动web开发之rem布局和less的相关
zh_hunan的博客
11-04 428
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同...
CSS之轻松实现rem适配
https://shixuebin.gitee.io/hexo-blog/
07-05 1224
1. vs Code安装 px to rem & rpx (cssrem) 2. 修改扩展 root font size 我这里是按照 设计稿 750px 3. 添加 rem.js (function flexible (window, document) { var docEl = document.documentElement // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 var dpr = window.devicePixelRatio || 1
css3 rem如何使用
chenhua4088的专栏
10-23 676
rem是一个相对大小的值，它是相对于根元素html>，不像em是相对于父元素，控制起来很麻烦，px又是绝对像素值，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-
CSS系列——rem
旅途
07-13 1202
css3的rem一点解析： 1、简单介绍： rem是相对单位，是相对于HTML根元素，再直白点就是相对于html元素字体大小的单位。 2、优点介绍： 这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 3、兼容性： 目前，除了IE8及更早版本外，所有浏览器均已支持rem。 ...
CSS：如何使用px、em、rem？
waiting677的博客
01-22 1294
目录 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是相对于显示器屏幕...
IE9下CSS3 REM单位兼容解决方案
3. 使用REM单位设置样式：在CSS中使用REM单位定义元素的尺寸，如宽度、高度、边距等。 4. 确保页面正确加载了JavaScript脚本：因为REM.js是基于JavaScript的，所以必须确保脚本正确加载和执行，才能保证REM单位的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值