px、rem、em、rpx 的区别及应用场景
2022/7/26 23:25:15
本文主要是介绍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,或者两者同时使用
这篇关于px、rem、em、rpx 的区别及应用场景的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现