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

三者的区别:

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

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
第七种黄昏几秒前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
一只卡比兽几秒前
动态规划与贪心算法详解:原理、对比与代码实践
前端
aiwery4 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless18 分钟前
C语言(12)——进阶函数
前端·html
码码哈哈爱分享20 分钟前
Tauri 框架介绍
css·rust·vue·html
一条上岸小咸鱼21 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh36 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手1 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨1 小时前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js