px、em 和 rem 的区别:深入理解 CSS 中的单位

文章目录

    • 前言
    • 一、`px` - 像素 (Pixel)
    • 二、`em` - 相对父元素字体大小 (Ems)
    • 三、`rem` - 相对于根元素字体大小 (Root Ems)
    • 四、综合比较
    • 结语


前言

在CSS中,pxemrem是三种用于定义尺寸(如宽度、高度、边距、填充等)的长度单位。它们各自有不同的特性,适用于不同的场景。接下来我们将更详细地探讨这三种单位。


一、px - 像素 (Pixel)

  • 定义
    • px代表像素,是一个绝对单位,它的大小固定且与设备无关,通常表示屏幕上一个点的大小。
  • 计算方式
    • 在大多数现代显示器上,1px等于屏幕上的一个物理像素点。然而,在高分辨率显示器(例如Retina显示屏)上,1px可能对应多个物理像素以保持视觉清晰度。
  • 适用场景
    • 当你需要精确控制元素的尺寸或位置时,比如设计图标或需要对齐的图形元素。
    • 对于需要保证一致性的布局部分,如导航栏的高度或按钮的尺寸。
  • 使用方法
    • 直接为属性赋值,无需考虑上下文环境的影响。
    /* 设置一个div的宽度为200像素 */
    div {width: 200px;
    }
    
  • 注意事项
    • 使用px可能会限制页面的响应性和可访问性,因为用户无法通过浏览器设置轻松调整文本大小。
    • 在移动设备上,固定的px值可能不适合所有屏幕尺寸,影响用户体验。

二、em - 相对父元素字体大小 (Ems)

  • 定义
    • em是一种相对单位,其值基于当前元素的字体大小。如果未特别指定,则默认为继承自父元素的字体大小。1em等于当前元素的字体大小。
  • 计算方式
    • 如果一个元素没有明确指定字体大小,它会从最近的非静态定位的祖先元素继承字体大小。因此,em的值依赖于上下文环境中的字体大小设定。
  • 适用场景
    • 适合创建可以随着父元素变化而自动调整的灵活布局。
    • 可以用作字体大小的单位,使整个文档树能够根据根元素的比例缩放。
  • 使用方法
    • em的值是相对于直接父元素的字体大小。对于嵌套的元素,子元素的em值会累积,即子元素的尺寸是基于父元素的em值计算的。
    /* 如果html的字体大小是16px,默认情况下,下面的p标签将有32px的字体大小 */
    p {font-size: 2em; /* 2 * 父元素的字体大小 */
    }/* 子元素的em值会累积 */
    .parent {font-size: 2em;
    }
    .parent .child {font-size: 1.5em; /* 1.5 * parent的字体大小 = 3em = 48px */
    }
    
  • 注意事项
    • 因为em是相对于父元素的字体大小,所以在嵌套结构中,每个子元素的em值都是基于其直接父元素的字体大小,这可能导致尺寸累积效应,增加计算复杂度。
    • 如果不注意,这种累积效应可能会导致难以预料的结果,特别是在深层次嵌套的情况下。

三、rem - 相对于根元素字体大小 (Root Ems)

  • 定义
    • rem也是一种相对单位,但它不是相对于父元素,而是相对于HTML文档的根元素(即<html>标签)的字体大小。这意味着无论元素位于DOM树的哪个位置,rem的值都是一致的。
  • 计算方式
    • 1rem等于HTML根元素的字体大小。如果未指定,则默认为浏览器的默认字体大小,通常是16px。
  • 使用场景
    • 创建完全独立于任何特定父元素的响应式设计,确保所有元素按照相同的基准进行缩放。
    • 简化了复杂的嵌套结构中的尺寸管理问题,因为不需要考虑父元素的影响。
  • 使用方法
    • rem的值是相对于根元素的字体大小。你可以通过改变根元素的字体大小来统一调整整个页面的尺寸。
    /* 设定根元素的字体大小 */
    html {font-size: 62.5%; /* 默认16px -> 10px */
    }/* 根据根元素字体大小设定其他元素 */
    body {font-size: 1.4rem; /* 1.4 * 10px = 14px */
    }h1 {font-size: 2.4rem; /* 2.4 * 10px = 24px */
    }/* 修改根元素字体大小会影响所有rem单位 */
    @media (min-width: 768px) {html {font-size: 75%; /* 新的1rem = 12px */}
    }
    
  • 注意事项
    • 要想让rem生效,最好是在全局样式表中设定根元素的字体大小。例如,可以通过html { font-size: 62.5%; }将默认字体大小设置为10px,使得后续的rem计算更加直观。
      在一些旧版本的浏览器中可能存在兼容性问题,但目前主流浏览器都已经支持rem

四、综合比较

特性/单位pxemrem
类型绝对单位相对单位相对单位
参考点屏幕像素父元素字体大小根元素字体大小
适用场景需要精确控制的元素深层次嵌套结构全局响应式设计
优点精确、易于预测灵活、适应性强易维护、一致性好
缺点不利于响应式设计计算复杂、易出错可能需要额外配置

结语

选择哪种单位取决于你的具体需求以及你希望给用户提供的体验。对于那些追求像素级精度的设计师来说,px可能是最好的选择;而对于想要创建更加灵活和响应式的网页,em和rem则是更好的选项。特别是rem,由于其简化了尺寸管理,并且提供了良好的可访问性支持,因此在现代Web开发中越来越受欢迎。

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

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

相关文章

【CI/CD构建】关于不小心将springMVC注解写在service层

背景 之前写一个接口的时候没有察觉到将RequestBody这个注解带到service层了。 今天提交代码的时候&#xff0c;插件没有检测到这个低级错误&#xff0c;导致试飞构建连maven编译都过不了&#xff0c;maven找不到程序包org.springframework.web.bind.annotation这个包 结果…

Oracle Dataguard(主库为双节点集群)配置详解(4):配置备库

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;4&#xff09;&#xff1a;配置备库 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;4&#xff09;&#xff1a;配置备库一、为备库配置静态监听1、配置 li…

《深入理解Mybatis原理》Mybatis中的缓存实现原理

一级缓存实现 什么是一级缓存&#xff1f; 为什么使用一级缓存&#xff1f; 每当我们使用MyBatis开启一次和数据库的会话&#xff0c;MyBatis会创建出一个SqlSession对象表示一次数据库会话。 在对数据库的一次会话中&#xff0c;我们有可能会反复地执行完全相同的查询语句&…

win32汇编环境,窗口程序中单选框的一般操作示例

;运行效果 ;win32汇编环境,窗口程序中单选框的一般操作示例 ;比如在窗口程序中生成单选框&#xff0c;默认哪项选中&#xff0c;判断当前选中哪一项&#xff0c;让哪项选中&#xff0c;得到选中项的名称等 ;直接抄进RadAsm可编译运行。重点部分加备注。 ;以下是ASM文件 ;>&g…

从transformer到informer

Transformer和Informer都是深度学习领域中的模型架构&#xff0c;它们主要用于处理序列数据&#xff0c;如自然语言处理&#xff08;NLP&#xff09;和时间序列预测任务。 **Transformer**&#xff1a; Transformer模型最初在2017年由Google的研究者提出&#xff0c;它在NLP领…

hive知识体系

hive知识体系 hive知识体系 链接: 1Hive概览 链接: 2Hive表类型 链接: 3Hive数据抽样 链接: 4Hive计算引擎 链接: 5Hive存储与压缩 链接: 6Hive Sql 大全 链接: 6Hive Sql 大全-Hive 函数 链接: 6Hive Sql 大全-窗口函数 链接: 7Hive执行计划 链接: 8Hive SQL底层执行原理 链接…

优化 Azure Synapse Dedicated SQL Pool中的 SQL 执行性能的经验方法

在 Azure Synapse Dedicated SQL Pool中优化 SQL 执行涉及了解底层体系结构&#xff08;例如分布和分区&#xff09;、查询优化&#xff08;例如避免不必要的子查询和联接&#xff09;&#xff0c;以及利用具体化视图和 PolyBase 等工具进行高效数据加载。 1.有效使用分布和分…

个人主页搭建全流程(Nginx部署+SSL配置+DCDN加速)

前言 最近开始准备秋招&#xff0c;打算做一个个人主页&#xff0c;以便在秋招市场上更有竞争力。 目前&#xff0c;现有的一些搭建主页的博文教程存在以下一些问题&#xff1a; 使用Github Page进行部署&#xff0c;这在国内访问容易受阻使用宝塔面板等框架&#xff0c;功能…

Spring MVC简单数据绑定

【图书介绍】《SpringSpring MVCMyBatis从零开始学&#xff08;视频教学版&#xff09;&#xff08;第3版&#xff09;》_springspringmvcmybatis从零开始 代码、课件、教学视频与相关软件包下载-CSDN博客 《SpringSpring MVCMyBatis从零开始学(视频教学版)&#xff08;第3版&…

嵌入式系统Linux实时化(四)Xenomai应用开发测试

1、Xenomai 原生API 任务管理 Xenomai 本身提供的一系列多任务调度机制,主要有以下一些函数: int rt_task_create (RT_TASK task, const char name, int stksize, int prio, intmode) ; 任务的创建;int rt_task_start(RT_TASK task, void(entry)(void cookie), void cookie…

如何在Ubuntu上安装和配置Git

版本控制系统&#xff08;VCS&#xff09;是软件开发过程中不可或缺的工具之一&#xff0c;它帮助开发者跟踪代码变更、协作开发以及管理不同版本的项目。Git作为当前最流行的分布式版本控制系统&#xff0c;因其高效性和灵活性而广受青睐。本文将指导你如何在Ubuntu操作系统上…

[python] bisect_right

等价于C中的upper_bound bisect_right 函数介绍 在Python的 bisect 模块中&#xff0c; bisect_right &#xff08;别名 bisect &#xff09;用于在有序序列中查找插入点。插入点是在序列中插入元素后&#xff0c;序列仍保持有序的位置。 bisect_right 函数返回的插入点是在已…

Mac上安装Label Studio

在Mac上安装Anaconda并随后安装Label Studio&#xff0c;可以按照以下步骤进行&#xff1a; 1. 在Mac上安装Anaconda 首先&#xff0c;你需要从Anaconda的官方网站下载适用于Mac的安装程序。访问Anaconda官网&#xff0c;点击“Download Anaconda”按钮&#xff0c;选择适合M…

vscode开启调试模式,结合Delve调试器调试golang项目详细步骤

1.前期准备 (1).在vs code中的扩展程序中搜索并安装Go扩展程序 (2).安装 Delve 调试器 go install github.com/go-delve/delve/cmd/dlvlatest (3).打开vs code的命令面板&#xff0c;输入Go: Install/Update Tools&#xff0c;并单击该命令执行&#xff0c;安装或更新Go语…

SQL面试题1:连续登陆问题

引言 场景介绍&#xff1a; 许多互联网平台为了提高用户的参与度和忠诚度&#xff0c;会推出各种连续登录奖励机制。例如&#xff0c;游戏平台会给连续登录的玩家发放游戏道具、金币等奖励&#xff1b;学习类 APP 会为连续登录学习的用户提供积分&#xff0c;积分可兑换课程或…

爬山算法与模拟退火算法的全方面比较

一、基本概念与原理 1. 爬山算法 爬山算法是一种基于启发式的局部搜索算法,通过不断地向当前解的邻域中搜索更优解来逼近全局最优解。它的核心思想是,从当前解出发,在邻域内找到一个使目标函数值更大(或更小)的解作为新的当前解,直到找不到更优的解为止。 2.模拟退火算…

PostgreSQL 超级管理员详解

1. 什么是 PostgreSQL 超级管理员 PostgreSQL 超级管理员&#xff08;superuser&#xff09;是拥有数据库系统最高权限的用户。他们可以执行任何数据库操作&#xff0c;包括但不限于创建和删除数据库、用户、表空间、模式等。超级管理员权限是 PostgreSQL 中权限的最高级别。 …

安装本地测试安装apache-doris

一、安装前规划 我的服务器是三台麒麟服务器,2台跑不起来,这是我本地的,内存分配的也不多。 fe192.168.1.13 主数据库端口9030访问 8Gbe192.168.1.13内存4G 硬盘50be192.168.1.14内存4G 硬盘50be192.168.1.12内存4G 硬盘5013同时安装的fe和be 。 原理:192.168.1.13 服…

GPT(General Purpose Timer)定时器

基本概念&#xff1a; 在嵌入式系统中&#xff0c;General Purpose Timer&#xff08;GPT&#xff09;是一种非常重要的硬件组件&#xff0c;用于提供定时功能。 定义&#xff1a;通用定时器是一种能够提供精确时间测量和控制功能的电子设备或电路模块。它可以产生周期性的时…

集中式架构vs分布式架构

一、集中式架构 如何准确理解集中式架构 1. 集中式架构的定义 集中式架构是一种将系统的所有计算、存储、数据处理和控制逻辑集中在一个或少数几个节点上运行的架构模式。这些中央节点&#xff08;服务器或主机&#xff09;作为系统的核心&#xff0c;负责处理所有用户请求和…