CSS之em、px、rem的区别

前端

作为一个前端开发工程师,关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些,也会用到vh、vw,其他的虽然用的少但也得了解,说不定就能解决你样式中的问题呢。

计量单位

在css中计量单位分相对长度单位和绝对长度单位

  • 相对长度单位:em、ex、ch、rem、vw、vh、vmin、vmax、%
  • 绝对长度单位:cm、mm、in、px、pt、pt、pc

今天就具体介绍一下其中的em、rem、px。其他的感兴趣的可以自己去了解。

em、px、rem

empx、和 rem 都是用于指定元素大小的单位,它们在 CSS 中有不同的用途和特性。

  1. px(像素):

    • px 是最基本的长度单位,表示相对于显示器屏幕分辨率的一个点。1 像素等于屏幕上的一个点。
    • px 是绝对单位,不受父元素的影响。当使用 px 时,元素的大小将始终相对于屏幕分辨率。
    div {width: 100px;height: 50px;font-size: 16px;
    }
    
  2. em:

    • em 是相对单位,它是相对于元素的字体大小来计算的。如果没有设置字体大小,则相对于父元素的字体大小。
    • 例如,如果父元素的字体大小为 16px,设置子元素的 font-size: 2em,则子元素的字体大小为 2 * 16px = 32px。
    body {font-size: 16px;
    }div {font-size: 2em; /* 相对于父元素字体大小,即 32px */
    }
    
  3. rem(根元素的相对单位):

    • remem 类似,但是相对的是根元素的字体大小。rem 是相对于文档的根元素(html 元素)的字体大小。
    • 这使得 rem 更易于控制整个页面的大小。
    html {font-size: 16px; /* 设置根元素字体大小 */
    }div {font-size: 2rem; /* 相对于根元素字体大小,即 32px */
    }
    

什么时候用哪个单位呢

选择使用哪个单位(pxemrem)通常取决于的设计和开发需求。以下是一些建议:

  1. 使用 px

    • 当希望元素的大小在不受父元素字体大小影响的情况下保持固定。
    • 对于一些固定大小的元素,如边框、间距等,通常使用 px 更为合适。
    div {width: 100px;padding: 10px;border: 1px solid #000;
    }
    
  2. 使用 em

    • 当希望元素的大小相对于其父元素的字体大小进行缩放。
    • 对于一些相对尺寸(如文本大小)和相对布局的情况,em 可以提供更灵活的解决方案。
    body {font-size: 16px;
    }div {font-size: 1.5em; /* 相对于父元素字体大小,即 24px */margin-bottom: 1em; /* 相对于父元素字体大小,即 16px */
    }
    
  3. 使用 rem

    • 当希望元素的大小相对于根元素的字体大小进行缩放,这样可以更容易控制整个页面的大小。
    • rem 通常用于设置全局的基础字体大小,然后其他元素使用 em 进行相对尺寸设置。
    html {font-size: 16px; /* 设置根元素字体大小 */
    }div {font-size: 2rem; /* 相对于根元素字体大小,即 32px */margin-bottom: 1rem; /* 相对于根元素字体大小,即 16px */
    }
    

选择合适的单位也要考虑到响应式设计的需求。相对单位(emrem)通常更适用于响应式设计,因为它们可以根据上下文动态地适应变化的环境,而绝对单位(px)在这方面相对较死板。

小结:

  • px 是绝对单位,不受父元素影响。
  • em 是相对于元素字体大小的单位,或者相对于父元素字体大小的单位。
  • rem 是相对于根元素字体大小的单位,因此更容易控制整个页面的大小。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XILINX-Zynq UltraScale+MPSoc 开发笔记

1. 资料信息 2. IDE集成开发环境 3. petalinux开发 3.1 环境搭建 1. 创建一个ubuntu18.04(或者其他版本),根据UG1144文档安装ubuntu下对petalinux的依懒工具。 2. 下载petalinux对应版本,链接:Downloads (xilinx.co…

【mysql】出错 Subquery returns more than 1 row

问题 查找出一下子查询返回超过1行 SELECT cc.id,DATE_FORMAT(cc.CREATE_TIME,%Y%m%d) as day_id, IFNULL((select f.source FROM strong_contact_fea f where f.id cc.id and STR_SPEC_IDS2023091145),10501) as strong_prod_level_1, IFNULL((select f.source from stron…

Python---端口和端口号的介绍

1. 问题思考 不同电脑上的飞秋之间进行数据通信,它是如何保证把数据给飞秋而不是给其它软件呢? 其实,每运行一个网络程序都会有一个端口,想要给对应的程序发送数据,找到对应的端口即可。 端口效果图: 2. 什么是端口 端口是传…

iOS将framework转为xcframework

拆分framework 先把framework拷贝到两个文件夹下边,这里只需要armv7、arm64、x86_64。 mkdir iphoneos iphonesimulator cp -R mysdk.framework iphoneos cp -R mysdk.framework iphonesimulator 把iphoneos中的模拟器指令集删除,只保留armv7和arm64 …

电巢助力第十届图像技术高峰论坛圆满落幕,回顾西电与电巢的校企合作四年硕果累累

图像技术高峰论坛圆满落幕 12月17日,由中国图象图形学学会、陕西省科学技术协会主办、西安电子科技大学通信工程学院、陕西省创新驱动共同体承办的“第十届图像技术高峰论坛暨陕西第五届图像处理与分析研讨会”在陕西西安成功举办。电巢科技作为本次论坛的承办单位&…

某电子文档安全管理系统 SQL注入漏洞复现

漏洞介绍 亿赛通电子文档安全管理系统 (简称: CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护…

RHCE8 资料整理(十二)

RHCE8 资料整理 第 33 章 jinja2模板的使用31.1 if 判断33.2 for循环33.3 handlers 第 33 章 jinja2模板的使用 详细参考 https://blog.csdn.net/u010230019/article/details/128561872 https://blog.csdn.net/u010230019/article/details/128477679 假设目前Nginx的配置文件在…

未来仓储新玩法小空间做大文章

身处智能消费时代的大家都应该有深刻感受,物流速度在逐年增快。根据国家邮政局预估,2020 年快递业务吞吐量超 740 亿件,同比增长 18%。 面对日益增加的商品交付量,不得不重新定义产品分销方式,从而满足当今互联网消费…

从零开始学HBase:打造你的大数据技能库!

介绍:HBase是一个分布式的、面向列的开源数据库,源于Fay Chang所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”。类似于Bigtable利用了Google文件系统(File System)提供的分布式数据存储,H…

<八>JavaScript中的对象及对像的增删改查

使用基本数据变量所创建的变量都是独立的,不能成为一个整体,对象属于复合型的数据类型,在对象中可以保存多个不同的数据类型的属性。 一、对象的分类 1.1内建对象 由ES标准中定义的对象 比如:Match、String、Number、Boolean、…

【Qt】Qt Creator 警告: Unused parameter ‘xxx‘

1. 问题 Qt开发中,有些函数参数没有使用,会报Unused parameter xxx警告,这个警告不影响代码正常运行。 2. 屏蔽这个警告的方法 2.1 方法1 函数中添加 Q_UNUSED(arg); TestClass::TestClass(QObject *parent) {Q_UNUSED(parent); }2.2 方…

【AI-2】深度学习框架详解

目前,有许多流行的深度学习框架可供选择,下面列举一些常见的深度学习框架: TensorFlow(Google) TensorFlow:由Google开发的开源深度学习框架,提供了丰富的工具和库,支持各种深度学…

IP查询类API接口查询,含各精度IP归属地查询接口

IP查询 IP归属地-IPv4高精版:根据IP地址查询归属地信息,支持到中国地区(不含港台地区)街道级别,包含国家、省、市、区县、详细地址和运营商等信息。IP归属地-IPv4区县级:根据IP地址查询归属地信息&#xf…

华为atlas300安装教程

1、安装包位置: /data/ai_install_packages 2、添加HwHiAiUser用户: groupadd -g 1000 HwHiAiUser useradd -g HwHiAiUser -u 1000 -d /home/HwHiAiUser -m HwHiAiUser -s /bin/bash 3、安装驱动: ./Ascend-hdk-310p-npu-driver_6.0.0_l…

前端FLV视频直播解决方案

项目背景: 1. 后台给出一个地址,持续不断的推送flv视频流。 2.前端需要接收视频流,并寻找合适的播放插件。 一开始: 其实用的是xgplayer(西瓜视频)。 官网地址:西瓜播放器 使用的是直播&a…

【10大专题,2.8w字详解】:从张量开始到GPT的《动手学深度学习》要点笔记

《动手学深度学习PyTorch版》复习要点全记录 📘 🎯 专注于查漏补缺、巩固基础,这份笔记将带你深入理解深度学习的核心概念。通过一系列精心整理的小专题,逐步构建起你的AI知识框架。 🧠 从最基础的张量操作&#xff0c…

DELL MD3600F更换控制器电池

1、存储左上角闪红灯,管理软件提示控制器1电池故障,需取出控制器更换上新电池。 2、通过管理软件确认两个控制器编号;确认到下面的是控制器1 3、拔掉控制器上插的线(SAS线、网线、光纤线),打好标签&#xf…

外贸SEO建站系统有哪些?海洋建站的优势?

外贸SEO建站怎么做比较好?如何做谷歌独立站SEO优化? 外贸企业越来越需要建立自己的在线形象,以吸引更多的潜在客户。而要实现这一目标,外贸SEO建站系统是一种非常有效的手段。那么,外贸SEO建站系统有哪些呢&#xff1…

常见 平滑函数

平滑函数是指具有较为连续和缓和性质的数学函数。这类函数通常在局部小范围内变化不大,避免了突变或者急剧的波动。以下是一些常见的平滑函数: 高斯函数(Gaussian Function) 高斯函数是一种常见的平滑函数,具有钟形曲…

LeetCode day28

LeetCode day28 由于一点小意外,今天就来搞搞滑动窗口(ง •_•)ง 1423. 可获得的最大点数 几张卡牌 排成一行,每张卡牌都有一个对应的点数。点数由整数数组 cardPoints 给出。 每次行动,你可以从行的开头或者末尾拿一张卡牌,…