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

三者的区别:

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

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
共享家952714 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn15 小时前
基于封装的专项 知识点
java·前端·python·算法
m0_7482299918 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒18 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..18 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile18 小时前
Class in Python
java·前端·python
小邓吖19 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意95719 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展
LJianK119 小时前
BUG: Uncaught Error: [DecimalError] Invalid argument: .0
前端
No Silver Bullet20 小时前
Nginx 内存不足对Web 应用的影响分析
运维·前端·nginx