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

三者的区别:

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

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
十八朵郁金香1 分钟前
深入理解 SSE:服务器发送事件及其在前后端中的实践
前端·javascript
加油乐4 分钟前
Sass与Less的特性与区别
前端·css
鹏多多6 分钟前
React自定义Hooks设计指南:从封装到复用
前端·javascript·react.js
JarvanMo22 分钟前
在 Flutter 中正确处理文本缩放
前端
深蓝电商API24 分钟前
HTML 解析入门:用 BeautifulSoup 轻松提取网页数据
前端·爬虫·python·beautifulsoup
excel44 分钟前
JavaScript 运算符与 Vue 中的 1 << n 应用
前端
上单带刀不带妹1 小时前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
怕冷的火焰(~杰)1 小时前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒2 小时前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥2 小时前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端