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

三者的区别:

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

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
beata6 分钟前
Java基础-19:Java 死锁深度解析:从原理、检测到预防与实战指南
java·前端
Sunshine11114 分钟前
浏览器渲染zz
前端
Jackson__23 分钟前
Agent Skill 是什么?
前端·agent·ai编程
韭菜炒大葱1 小时前
前端经典面试题:从 URL 输入到页面展示,中间经历了什么?
前端·http·面试
swipe1 小时前
纯函数、柯里化与函数组合:从原理到源码,构建更可维护的前端代码体系
前端·javascript·面试
远山枫谷1 小时前
uniapp + Vue 自定义组件封装:自定义样式从入门到实战
前端·vue.js
Lee川1 小时前
JavaScript 中的 `this` 与变量查找:一场关于“身份”与“作用域”的深度博弈
前端·javascript·面试
顺遂4 小时前
基于Rokid CXR-M SDK的引导式作业辅导系统设计与实现
前端
代码搬运媛4 小时前
Generator 迭代器协议 & co 库底层原理+实战
前端
前端拿破轮4 小时前
从0到1搭建个人网站(三):用 Cloudflare R2 + PicGo 搭建高速图床
前端·后端·面试