px、rem、em、rpx 的区别及应用场景
px 像素单位，相对于显示器屏幕的分辨率
特点：设置字体大小和宽度比较精确和稳定，但不适用浏览器缩放时产生的变化
rem 是CSS3新增的单位，参考对象为<html>标签的font-size值， 如：html {font-size: 24px}，1rem = 24px
特点： 适用于做适配，响应式的网站
em 参考对象为父元素的字体大小，子元素字体的1em = 父元素字体大小
特点：可以较好的响应设备屏幕尺寸的变化，但是需要知道父元素的字体大小， 如果未设置父元素字体大小，可能会导致错误
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位，微信小程序规定的屏幕宽度为750rpx
特点：毫无疑问，适用微信小程序场景
注意：任何浏览器的默认字体大小都是16px， 在未修改默认字体大小的情况下：1rem = 16px, 1.5rem = 24px
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大，使用px即可
对于需要适配各种移动设备，iPhone、iPad等，使用rem可实现
注意：选择什么字体单位主要是由你所开发的项目面向哪一类用户群体，如果你的用户群体都使用最新版的浏览器，那建议使用rem，如果药考虑兼容性，那就使用px，或者两者同时使用
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义