CSS中px、em、rem的区别及使用场景

三者的区别:

  • px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性,他们是相对长度单位,其长度不是固定的,更适用于响应式布局。
  • em是相对于其父元素来设置字体大小,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素,这样就意味着,只需要在根元素确定一个参考值。

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
Swot21 分钟前
SvelteKit Remote Functions 使用指南
前端·后端
Cooper2527 分钟前
三源热榜去重加 AI 摘要:URL 唯一键踩出的三个坑
前端·python
Yk酱2284043 分钟前
A2UI探索随笔-技术选型
前端
前端繁华如梦1 小时前
# 从 73000 行压缩代码到 TypeScript 模块化:我把一个 Three.js FPS 游戏 1:1 复刻了一遍
前端
Penge6661 小时前
React Context 详解:从 Props 传递到跨组件状态共享
前端
Penge6661 小时前
React 事件处理:bind(this) 原理与实际开发常用写法
前端
ZhengEnCi1 小时前
小白用 AI 做官网完全指南:不用框架的六格清单,双击就能打开
前端·html·ai编程
zhanlang02171 小时前
HTML 零基础入门到企业实战【第五章 5.2】图片路径精讲:绝对路径、相对路径、网络路径(新手必踩坑点)
前端·html
夕水2 小时前
我用trae重构了ew-color-picker,一个插件化架构的现代颜色选择器
前端·javascript·开源
Penge6662 小时前
React JSX 核心语法:从入门到业务开发实战
前端