ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

px、rem、em、rpx 的区别及应用场景

2022-07-26 14:36:16  阅读:260  来源: 互联网

标签:em 字体大小 rpx px rem 适配 微信 24px


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,或者两者同时使用

 

标签:em,字体大小,rpx,px,rem,适配,微信,24px
来源: https://www.cnblogs.com/cdyun/p/16520862.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有