相对单位em和rem的区别，屏幕适配

最新推荐文章于 2024-03-15 10:03:37 发布
最新推荐文章于 2024-03-15 10:03:37 发布
阅读量141 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/af666/blog/861530
本文详细解释了相对单位em和rem的区别及其应用场景。em单位根据父元素的字体大小进行转换，适用于继承父级字体大小的场景；而rem单位则依据根元素html的字体大小，适合用于webapp中进行屏幕适配。

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

为什么80%的码农都做不了架构师？>>>   hot3.png

相对单位em和rem的区别，屏幕适配

都是相对单位，由浏览器转换为像素值，具体取决于设计中的字体大小设置。

em转化为像素值是根据父元素的字体大小。

rem转化为像素值是根据根元素html的字体大小。

em单位是相对于父元素的字体大小。继承父级元素的字体大小，如果嵌套的层级多了，都有设置字体大小，就很难计算。

rem单位相对于根元素html的字体大小。

web app 通过设置根元素html的字体大小来控制rem的大小，可以做屏幕适配。

转载于:https://my.oschina.net/af666/blog/861530

rem、px、em(手机端h5页面屏幕适配的几种方法)
github_36758028的博客
12-06 4万+
px px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。 em 相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可
px、em 和 rem 的区别：深入理解 CSS 中的单位
chaosweet的博客
01-14 1438
授人以鱼，不如授人以渔。
相对单位em、rem
weixin_34376562的博客
06-13 158
案例如下 　　 　　 　　 　　 　　 转载于:https://www.cnblogs.com/yangyutian/p/11015939.html
屏幕大小适配，rem与em的区别适用
高振的博客
07-06 1863
em：一般都是以的“font-size”为基准。相对于父元素的属性而计算的.进行任何元素设置，都有可能需要知道他父元素的大小。     rem：相对于根元素设置字体大小，只需要在根元素确定一个参考值。     @media screen and (max-width: 320px) {         html,body {             font-size: 12px;
CSS3中的Rem值与Px之间的换算
unbreakablec的博客
02-14 1万+
CSS3中的Rem值与Px之间的换算 bootstrap默认 html｛font-size: 10px;}   rem是一个相对大小的值，它相对于根元素<html>， 比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。 然后其他的字体就是将你要的值除以14得到的值； 比如默认的twentytwelve主题大小是960...
CSS 中相对长度 rem 和 em 如何区别
simonyuan100的博客
08-01 3466
rem vs em做为相对长度单位的俩个活宝， 都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别： 1，em 的参照倍数对象为其父元素 2，rem的参照倍数对象为根元素事例代码：<html style="font-size:14px"> <div style="font-size:14px;background:#bbb;border:1px solid #f00;margin-
em和rem的区别，rem适配的原理
WZH15075051915的博客
03-15 4033
rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。
了解真实的REM手机屏幕适配
08-10
总的来说，`rem`单位是实现手机屏幕适配和响应式设计的重要工具，通过它，开发者可以轻松创建适应各种屏幕尺寸的网页，提供更优质的用户体验。在实践中，结合媒体查询、适当的设计图转换策略以及考虑兼容性问题，...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
在移动端Web开发中，选择合适的长度单位对于布局和适配至关重要。本文主要探讨了rem、em、px、vh、vw以及%这几种常见的长度单位，分析它们的特点与应用场景。 1. **px（像素）** - 像素是绝对单位，表示屏幕上的一...
rem适配js文件flexible.js和echartPxToRem.js
02-22
`rem`（root em）单位是一种基于根元素（通常是html元素）字体大小的相对单位，它可以帮助我们实现响应式布局，使得设计能够自适应不同分辨率和屏幕尺寸的设备。本主题将详细讲解如何利用`flexible.js`和`...
vue中使用rem布局解析+大屏自适应
热门推荐
Cassie's blog
10-18 6万+
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。 首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。 浅析rem 首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼 rem...
rem原理详解
MaJing_CUI的博客
12-20 1万+
**rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 **rem布局原理 拿到设计
RA4M2开发IOT(5)-读取单双击
08-09
RA4M2开发IOT(5)----读取单双击 优快云文字教程：https://coremaker.blog.youkuaiyun.com/article/details/148819744 B站教学视频：https://www.bilibili.com/video/BV1xkTszjExu 概述 在上章读取MEMS基础上，我们去识别 单击 与 双击，为后续菜单切换、模式切换等人机交互做铺垫。 硬件准备 首先需要准备一个开发板，这里我准备的是自己绘制的开发板，需要的可以进行申请。 主控为R7FA4M2AD3CFL#AA0 模块配置如下所示。 ● Name：g_external_irq6，这是该外部中断的名称。 ● Channel：选择了6通道。 ● Trigger：触发方式设置为Rising（上升沿触发），即信号上升时触发中断。 ● Digital Filtering：未启用数字滤波（Not Supported）。 ● Digital Filtering Sample Clock：由于数字滤波未启用，因此该项也未支持。 ● Callback：指定了回调函数external_irq6_callback。当中断触发时，将调用此函数处理具体逻辑。 ● Pin Interrupt Priority：设置为Priority 2，表示该中断的优先级为2。 ● IRQ06：映射到引脚P000，即该中断信号通过引脚P000触发。
基于AD8436的真均方根-直流（RMS-DC）转换器设计及其应用
08-09
内容概要：本文档详细介绍了Analog Devices公司生产的AD8436真均方根-直流（RMS-to-DC）转换器的技术细节及其应用场景。AD8436由三个独立模块构成：轨到轨FET输入放大器、高动态范围均方根计算内核和精密轨到轨输出放大器。该器件不仅体积小巧、功耗低，而且具有广泛的输入电压范围和快速响应特性。文档涵盖了AD8436的工作原理、配置选项、外部组件选择（如电容）、增益调节、单电源供电、电流互感器配置、接地故障检测、三相电源监测等方面的内容。此外，还特别强调了PCB设计注意事项和误差源分析，旨在帮助工程师更好地理解和应用这款高性能的RMS-DC转换器。 适合人群：从事模拟电路设计的专业工程师和技术人员，尤其是那些需要精确测量交流电信号均方根值的应用开发者。 使用场景及目标：①用于工业自动化、医疗设备、电力监控等领域，实现对交流电压或电流的精准测量；②适用于手持式数字万用表及其他便携式仪器仪表，提供高效的单电源解决方案；③在电流互感器配置中，用于检测微小的电流变化，保障电气安全；④应用于三相电力系统监控，优化建立时间和转换精度。 其他说明：为了确保最佳性能，文档推荐使用高质量的电容器件，并给出了详细的PCB布局指导。同时提醒用户关注电介质吸收和泄漏电流等因素对测量准确性的影响。
RA4M2-MINI开发(5)-GPIO输入检测
08-09
RA4M2_MINI开发(5)----GPIO输入检测 优快云文字教程：https://coremaker.blog.youkuaiyun.com/article/details/149826725 B站教学视频：https://www.bilibili.com/video/BV1CPgazKEWT/ 概述 本篇文章主要介绍如何使用e2studio对瑞萨单片机进行GPIO输入检测。 硬件准备 首先需要准备一个开发板，这里我准备的是自己绘制的开发板，需要的可以进行申请。 主控为R7FA4M2AD3CFL
卷积-长短期记忆网络（CNN-LSTM）实现数据分类预测的matlab代码（2019A及以上版本）
最新发布
08-09
内容概要：本文介绍了利用卷积-长短期记忆网络（CNN-LSTM）进行数据分类预测的方法及其MATLAB代码实现。首先阐述了CNN和LSTM这两种深度学习网络的基本概念以及它们各自的优势，接着详细讲解了如何用MATLAB 2019A及以上版本编写代码完成从数据预处理到模型构建、训练直至最终测试评估的一系列流程。文中提供了具体的代码片段作为指导，帮助读者更好地理解和掌握这一先进的机器学习技术。 适合人群：对深度学习感兴趣的研究人员和技术爱好者，尤其是那些希望深入了解CNN-LSTM架构并在MATLAB环境中实践相关项目的个体。 使用场景及目标：适用于需要处理具有时空特性数据的应用场合，比如视频动作识别、自然语言处理等领域。通过本篇文章的学习，读者能够学会如何运用CNN提取图像特征，借助LSTM捕捉时间序列信息，从而提升数据分类预测的效果。 其他说明：为了确保最佳效果，请确保使用的MATLAB版本不低于2019A，并熟悉基本的MATLAB编程技巧。此外，在实际操作前还需准备好相应的数据集用于实验验证。
欧姆龙CP1H与三菱E700变频器通讯程序：实现频率设定与读取的工业自动化解决方案
08-09
内容概要：本文介绍了欧姆龙CP1H PLC控制器与三台三菱E700变频器之间的通讯程序，重点在于通过C IF11通讯板实现频率设定和实际频率读取的功能。文中详细描述了硬件配置（如欧姆龙CP1H、三菱E700变频器）、程序功能（设定频率、读取实际频率、监控运行状态）、通讯协议及流程（设备初始化、数据传输、数据处理），并提供了接线及参数设置的具体指导。此外，还强调了通讯的稳定性、可靠性及其在工业自动化应用中的灵活性和实用性。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些负责PLC控制系统和变频器通讯的人群。 使用场景及目标：① 实现对多台变频器的频率设定和读取；② 监控变频器的运行状态，确保数据传输的实时性和准确性；③ 扩展到更多变频器的通讯系统，提高系统的灵活性和适应性。 其他说明：该程序不仅提供了详细的硬件配置和软件实现方法，还包括了接线图和参数设置指南，帮助用户快速部署和调试系统。
工控领域V90PN程序打包块：实现多模式运行与速度调节及故障处理
08-09
内容概要：本文介绍了博图原创的V90PN程序打包块，旨在简化对V90PN伺服电机的控制。该程序包实现了多种运行模式，如点动、回原点、绝对运行等功能，并支持速度调节。它能够处理输入信号（如点动正反转、回原点模式、极限开关信号等），并提供详细的输出信号（如使能状态、故障信息、当前位置和速度）。此外，还详细描述了回原点的状态机流程，确保原点确认的准确性，并强调了连锁信号和故障处理机制的设计。 适合人群：从事工业自动化控制领域的工程师和技术人员，尤其是那些需要频繁配置和调试V90PN伺服电机的人群。 使用场景及目标：适用于需要高效、稳定地控制V90PN伺服电机的应用场合，如生产线自动化设备、机器人控制系统等。主要目标是减少配置复杂度，提高系统可靠性和安全性。 其他说明：文中提到的速度参数建议分级管理，以适应不同技能水平的操作员。同时，针对常见的故障进行了优化处理，提供了直观的故障提示，便于维护和排查问题。
基于TMS320F28035图形化开发的整流套件，支持Simulink直接开发
08-09
基于TMS320F28035图形化开发的整流套件及其在Simulink环境中的直接开发方法。首先概述了TMS320F28035这款高性能DSP的特点和应用场景，接着阐述了整流套件的组成和功能，强调了其高效的整流效果和便捷的图形化开发界面。文中重点讲解了如何利用Simulink进行系统仿真和开发，包括模型建立、仿真测试以及代码自动生成等功能，显著提升了开发效率。最后指出该整流套件在电力电子、电机控制、汽车电子等领域的广泛应用前景。 适合人群：从事电力电子、电机控制、汽车电子等相关领域的工程师和技术人员，尤其是希望提高开发效率并掌握最新开发工具的专业人士。 使用场景及目标：适用于需要高效、稳定整流控制系统的项目开发，旨在帮助开发者快速构建和优化整流系统，缩短开发周期，降低开发难度。 其他说明：该整流套件不仅提供了硬件支持，还配备了易用的图形化开发界面和强大的Simulink仿真工具，为开发者提供了全方位的支持。
移动端rem单位换算工具实现屏幕适配
文件描述说明了这个压缩包的作用是在手机端使用REM单位进行单位换算，并且能够根据屏幕大小动态改变根元素的字体大小，从而实现适配不同设备的设计。标签中也提到了关键词“rem”，“painbt3”和“whisperedzvw”，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值