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

三者的区别:

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

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
相关推荐
xkxnq1 分钟前
第一阶段:Vue 基础入门(第 13天)
前端·javascript·vue.js
qq_419854053 分钟前
Excel预览
前端
PieroPc12 分钟前
用FastAPI 后端 和 Vue3 前端写一个博客系统 例
前端·vue·fastapi
xiaoyustudiowww21 分钟前
fetch异步简单版本(Tomcat 9)
java·前端·tomcat
TOPGUS22 分钟前
谷歌Chrome浏览器即将对HTTP网站设卡:突出展示“始终使用安全连接”功能
前端·网络·chrome·http·搜索引擎·seo·数字营销
C_心欲无痕29 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript
一勺菠萝丶34 分钟前
Java 后端想学 Vue,又想写浏览器插件?
java·前端·vue.js
@PHARAOH39 分钟前
HOW - 如何禁用 localstorage
前端·状态模式
霍理迪40 分钟前
CSS布局方式——弹性盒子(flex)
前端·css
xkxnq1 小时前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js