当前位置： 首页 > news >正文

屏幕尺寸单位 px、em、rem区别

news 2026/4/19 23:46:25

1、px是屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。假设：1号显示器上1px宽=1毫米，但2号显示器1px宽=两毫米，那么定义一个div宽度为100px，1号显示器上看这个div是10厘米，2号显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。

2、em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。如果人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小，只要改body里面font-size的值就行了。

另外：em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}

<html>
我大小为16px;
<p>
  段落文字大小为12px(16*0.75);
  <span>
    我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px
  </span>
</p>
</html>

3、Rem，Rem(浏览器支持还不是很理想)，只相对html或body的字体尺寸(默认还是16px，除非你自己用font-size定义为其他)，没有了继承父级尺寸这个关系。

相关文章：

屏幕尺寸单位 px、em、rem区别

1、px是屏幕设备物理上能显示出的最小的一个点&#xff0c;这个点不是固定宽度的&#xff0c;不同设备上点的长宽、比例有可能会不同。假设&#xff1a;1号显示器上1px宽1毫米&#xff0c;但2号显示器1px宽两毫米&#xff0c;那么定义一个div宽度为100px&#xff0c;1号显示器上…...

编程日记 2023/8/13 13:15:23

yo！这里是STL::list类简单模拟实现

目录 前言 重要接口实现 框架 默认成员函数 迭代器&#xff08;重点&#xff09; 1.引言 2.list迭代器类实现 3.list类中调用实现 增删查改 后记 前言 我们知道&#xff0c;stl中的vector对应数据结构中的顺序表&#xff0c;string类对应字符串&#xff0c;而今天要…...

编程日记 2023/8/13 13:14:22

小程序商城开发制作

当开发一个商城小程序时&#xff0c;费用是一个非常重要的考虑因素。然而&#xff0c;准确回答这个问题是有一定困难的&#xff0c;因为开发商城小程序的费用取决于多个因素。以下是一些可能影响价格的主要因素&#xff1a; 1. 功能需求&#xff1a;商城小程序的复杂程度和功能…...

编程日记 2023/8/13 13:13:20

并发编程面试题2

并发编程面试题2 一、AQS高频问题&#xff1a; 1.1 AQS是什么&#xff1f; AQS就是一个抽象队列同步器&#xff0c;abstract queued sychronizer&#xff0c;本质就是一个抽象类。 AQS中有一个核心属性state&#xff0c;其次还有一个双向链表以及一个单项链表。 首先state…...

编程日记 2023/8/13 13:12:20

关于eclipse导入部署具有增删改查的项目

目录 前言&#xff1a;当我们刚刚进入公司的第一步就是去部署当前公司的项目&#xff0c;本博客就是详细介绍怎么去部署当前公司的项目。 一&#xff0c;开发工具&#xff1a; 二&#xff0c;具体步骤&#xff1a; 2.1导入公司的项目 打开eclipse开发工具 2.2配置当前的环…...

编程日记 2023/8/13 13:11:18

c++日志工具之——log4cpp

1、log4cpp概述 Log4cpp是一个开源的C类库&#xff0c;它提供了C程序中使用日志和跟踪调试的功能&#xff0c;它的优点如下&#xff1a; 提供应用程序运行上下文&#xff0c;方便跟踪调试&#xff1b; 可扩展的、多种方式记录日志&#xff0c;包括命令行、文件、回卷文件、内…...

编程日记 2023/8/13 13:10:17

ES索引重建reindex详解

目录 一、使用场景 二、reindex介绍 三、使用手册 1、覆盖更新 2、创建丢失的文档并更新旧版本的文档 3、仅创建丢失的文档 4、冲突处理 5、source中添加查询条件 6、source中包含多个源索引 7、限制处理的记录数 8、从远程ES集群中重建索引 9、提取随机子集 10、…...

编程日记 2023/8/13 13:09:16

前沿分享-中距离射频取电

目前来看&#xff0c;微能源有四种技术路线&#xff0c;一是环境光采集、温差转换采集、无线射频采集和振动能量采集。 无线射频微能源是在通信设备通信过程中自然产生的&#xff0c;可以通过射频能量芯片实现无线射频取电&#xff0c;能瞬间大功率储电和安全驱动负载。 通过射…...

编程日记 2023/8/13 13:08:13

UnrealEngine - 网络同步之连接篇

1 连接过程 - 握手 传统的 C/S 架构下&#xff0c;Client 和 Server 通常会建立一条抽象的 Connection&#xff0c;用来进行两端的通信。 UE 的官方文档中提供了 Client 连接到 Server 的示例 &#xff0c;简单来说分为如下几步&#xff1a; 打包构建好 Client 和 Server 进程…...

编程日记 2023/8/13 13:07:12

【JDBC系列】- 扩展提升学习

扩展提升学习 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xff0c;欢迎指正&#xff0…...

编程日记 2023/8/13 13:06:11

阻塞和非阻塞，同步和异步

文章目录 典型的一次IO的两个阶段IO多路复用是同步还是异步&#xff1f; 典型的一次IO的两个阶段 数据就绪和数据读写 同步&#xff1a;需要应用程序自己操作 IO多路复用是同步还是异步&#xff1f; epoll也是同步的 具体数据读取还是通过应用程序自己完成的 只有使用了特…...

编程日记 2023/8/13 13:05:11

提速Rust编译器！

Nethercote是一位研究Rust编译器的软件工程师。最近&#xff0c;他正在探索如何提升Rust编译器的性能&#xff0c;在他的博客文章中介绍了Rust编译器是如何将代码分割成代码生成单元&#xff08;CGU&#xff09;的以及rustc的性能加速。 他解释了不同数量和大小的CGU之间的权衡…...

编程日记 2023/8/13 13:04:09

QT创建项目

可选择CMake或qmake...

编程日记 2023/8/13 13:03:08

基于vue3+webpack5+qiankun实现微前端

一 主应用改造&#xff08;又称基座改造&#xff09; 1 在主应用中安装qiankun(npm i qiankun -S) 2 在src下新建micro-app.js文件&#xff0c;用于存放所有子应用。 const microApps [// 当匹配到activeRule 的时候&#xff0c;请求获取entry资源&#xff0c;渲染到containe…...

编程日记 2023/8/13 13:02:05

华为OD真题--完美走位--带答案

2023华为OD统一考试&#xff08;AB卷&#xff09;题库清单-带答案&#xff08;持续更新&#xff09;or2023年华为OD真题机考题库大全-带答案&#xff08;持续更新&#xff09; 题目描述 输入一个长度为4的倍数的字符串Q,字符串中仅包含WASD四个字母。 将这个字符串中的连续子串…...

编程日记 2023/8/13 13:01:04

【AI】《动手学-深度学习-PyTorch版》笔记（十四）：多层感知机

AI学习目录汇总 1、多层感知机网络结构 1.1 线性模型：softmax回归 在前面介绍过，使用softmax回归来处理分类问题时，每个输出通过都一个仿射函数计算，网络结构如下，输入和输出之间为全链接层： 1.2 多层感知机 多层感知机就是在输入和输出中间再添加一个或多个全链接…...

编程日记 2023/8/13 13:00:00

本地开发 npm 好用的http server、好用的web server、静态服务器

好用的web server总结 有时需要快速启动一个web 服务器&#xff08;http服务器&#xff09;来伺服静态网页&#xff0c;安装nginx又太繁琐&#xff0c;那么可以考虑使用npm serve、http-server、webpack-dev-server。 npm serve npm 的serve可以提供给http server功能&#…...

编程日记 2023/8/13 12:58:59

Gradio入门，并搭个鸡兔同笼问题小应用，附源码（MindOpt)

应用链接&#xff1a; https://979427749bc9ceec34.gradio.live 是公开访问链接&#xff0c;3天有效。 在modelscope中的创空间发布长期有效:https://modelscope.cn/studios/wuyoy520v01/MindOpt_Chicken-with-rabbit-cage/summary。 应用图如下&#xff0c;源代码见正文。 知…...

编程日记 2023/8/13 12:57:58

redis核心知识点简略笔记

value数据类型 string 二进制安全 list 有序、可重复 set 无序、不重复 hash field-value的map sorted set 不重复、通过double类型score分数排序 场景 string 计数器缓存分布式锁访问频率控制分布式session hash 购物车等对象属性灵活修改 list 定时排行榜 set 收藏 sorte…...

编程日记 2023/8/13 12:56:56

消息中间件 —— 初识Kafka

文章目录 1、Kafka简介1.1、消息队列1.1.1、为什么要有消息队列&#xff1f;1.1.2、消息队列1.1.3、消息队列的分类1.1.4、p2p 和 发布订阅MQ的比较1.1.5、消息系统的使用场景1.1.6、常见的消息系统 1.2、Kafka简介1.2.1、简介1.2.2、设计目标1.2.3、kafka核心的概念 2、Kafka的…...

编程日记 2023/8/13 12:55:55

3步实现安卓投屏：QtScrcpy让你的手机在电脑上流畅操作

3步实现安卓投屏&#xff1a;QtScrcpy让你的手机在电脑上流畅操作 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...

编程新知 2026/4/19 23:35:16

别再为Linux读卡器发愁了！手把手教你用pcsc-lite搞定USB智能卡驱动（附常见错误排查）

Linux智能卡驱动终极指南&#xff1a;从安装到排错的完整解决方案 每次在Linux系统上插上USB智能卡读卡器&#xff0c;却发现系统毫无反应时&#xff0c;那种挫败感简直让人抓狂。作为一位经历过无数次驱动安装失败的"过来人"&#xff0c;我完全理解这种痛苦——明明…...

编程新知 2026/4/19 23:27:09

从TM1到TM9：手把手教你用Wireshark和商用路测软件分析LTE空口传输模式切换

LTE传输模式深度解析&#xff1a;从TM1到TM9的技术演进与实战应用 引言 在移动通信领域&#xff0c;LTE传输模式(TM)的灵活切换是提升网络性能的关键技术之一。作为网络优化工程师&#xff0c;深入理解不同传输模式的特点及适用场景&#xff0c;能够帮助我们更精准地诊断网络问…...

编程新知 2026/4/19 21:38:43

手把手教你用ODrive GUI校准电机：避开电阻电感测量中的那些坑

手把手教你用ODrive GUI校准电机&#xff1a;避开电阻电感测量中的那些坑 电机校准是使用ODrive驱动板时最关键的步骤之一&#xff0c;但很多开发者在实际操作中都会遇到各种问题——电机发出刺耳的啸叫声、校准进度条卡住不动、测量结果明显偏离正常范围。这些问题往往源于对…...

编程新知 2026/4/19 21:15:03

飞凌OK3568-C开发板音频调试实战：从DTS配置到amixer命令，搞定RK809 Codec录音放音

飞凌OK3568-C开发板音频调试实战&#xff1a;从DTS配置到amixer命令&#xff0c;搞定RK809 Codec录音放音 在嵌入式Linux开发中&#xff0c;音频功能的调试往往是让开发者头疼的环节之一。特别是当面对集成度高的PMIC芯片时&#xff0c;如何正确配置DTS、理解音频路径切换逻辑、…...

编程新知 2026/4/19 20:54:04

避坑指南：RH850 SPI DMA配置中PEG权限和InterDataTime那些事儿，你踩雷了吗？

RH850 SPI DMA实战避坑&#xff1a;PEG权限与InterDataTime的深度解析 实验室里&#xff0c;示波器上的SPI波形突然停滞&#xff0c;工程师盯着屏幕上的异常数据陷入沉思——这已经是本周第三次遇到DMA传输失败的问题了。RH850的SPI DMA配置看似简单&#xff0c;但PEG权限设置不…...

编程新知 2026/4/19 20:35:47

爆火背后：OpenClaw 开源AI智能体应用攻击面与安全风险系统剖析

2026年初&#xff0c;OpenClaw&#xff08;曾用名Clawdbot、Moltbot&#xff09;这一开源自主AI智能体项目在全球范围内迅速引爆关注。作为一款以聊天Bot形态运行的自动化智能体应用&#xff0c;它允许用户通过Web页面、IM工具&#xff08;如Telegram、Slack、Discord等&#x…...

编程新知 2026/4/19 19:28:31

Meta Llama 3 8B Instruct GGUF模型：如何在普通电脑上运行强大的对话AI

Meta Llama 3 8B Instruct GGUF模型&#xff1a;如何在普通电脑上运行强大的对话AI 【免费下载链接】Meta-Llama-3-8B-Instruct-GGUF 项目地址: https://ai.gitcode.com/hf_mirrors/SanctumAI/Meta-Llama-3-8B-Instruct-GGUF 想要在个人电脑上体验Meta最新的大型语言模…...

编程新知 2026/4/19 18:04:42

Altium Designer 20 画效果器原理图：从模块拆分到封装选择的保姆级避坑指南

Altium Designer 20 画效果器原理图&#xff1a;从模块拆分到封装选择的保姆级避坑指南 第一次用Altium Designer画电吉他效果器原理图时&#xff0c;我盯着空白的画布发呆了半小时——不是不会用软件&#xff0c;而是不知道从哪下手。直到把整个电路拆分成AMP、SWITCH等模块&a…...

编程新知 2026/4/19 14:50:32

ahk2_lib架构设计解析：构建AutoHotkey V2原生扩展生态的技术实现

ahk2_lib架构设计解析&#xff1a;构建AutoHotkey V2原生扩展生态的技术实现 【免费下载链接】ahk2_lib 项目地址: https://gitcode.com/gh_mirrors/ah/ahk2_lib ahk2_lib是专为AutoHotkey V2设计的原生扩展库集合&#xff0c;通过系统级API封装、跨语言调用机制和模块…...

编程新知 2026/4/19 13:44:21