Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

「疑问」不支持使用 rem? #101

Open
wenfangdu opened this issue May 24, 2023 · 8 comments
Open

「疑问」不支持使用 rem? #101

wenfangdu opened this issue May 24, 2023 · 8 comments

Comments

@wenfangdu
Copy link

wenfangdu commented May 24, 2023

据我所知微信小程序和字节小程序都是支持 rem 的,为啥文档上写不支持呢?
image
https://docs.taro.zone/docs/use-h5#%E4%B8%8D%E6%94%AF%E6%8C%81%E4%BD%BF%E7%94%A8-rem

https://developers.weixin.qq.com/community/develop/doc/0006c07d3ec3a8e8236b484ba56000

@taro-bot2 taro-bot2 bot added enhancement New feature or request labels May 24, 2023
@hxlniada
Copy link

为啥要用rem?

@yoyo837
Copy link
Contributor

yoyo837 commented May 25, 2023

缩放

@hxlniada
Copy link

用px会自动转成rpx和rem,还不用手动算

@wenfangdu
Copy link
Author

@hxlniada tailwindcss 的默认主题只有 rem,改成 px 非常麻烦。另外,为什么用 rem 和能不能用 rem 是两个问题,这个 issue 只针对于文档「关于能不能用」有没有出错。

@agileago
Copy link
Contributor

@wenfangdu
Copy link
Author

@agileago 谢谢留言,既然小程序支持 rem,就没要转成 px。

@agileago
Copy link
Contributor

不是,你最好使用统一的,然后通过框架自动转换,减少心智负担

@ZakaryCode ZakaryCode transferred this issue from NervJS/taro Jun 15, 2023
@ZakaryCode ZakaryCode removed the enhancement New feature or request label Aug 3, 2023
@SentretC
Copy link

不是,你最好使用统一的,然后通过框架自动转换,减少心智负担

抱歉冒昧,我目前不是taro的用户(接触过小程序开发),从tailwind那边好奇点进来,但看到这里想交流一下看法

在我看来不同单位的存在是有其道理的:

  • rpx基于屏幕宽度而定义,类似于css标准的vw,一律用rpx就意味着大屏上的显示效果只是小屏的简单放大,对于大小相差不多的手机来说影响不大,但仍难说是最佳方案;而如果要适配尺寸相差更大的设备,虽然远不是只靠单位的选择与组合所能解决,但统一使用rpx的弊端会更加明显
  • rem定义为根元素的字体大小,用户可能因视力不佳等原因手动设置字号,需要跟随此设置所变化的尺寸则适合以rem为单位(指理想情况,可惜微信原生不是这样,也许taro未来能支持这种用法?)(之所以会去看tailwind那个issue也是觉得他们到处用rem不够理想,PC端全局放大没什么问题,手机上如果各种间距留白也随字体放大的话就放不下多少东西了)
  • px则是既不与屏幕尺寸关联、又不与字体大小关联的尺寸(不是物理像素)

个人浅见(理想情况下):

  • 需要填充屏幕的场合宜使用flex布局,需要与屏幕尺寸关联但不适合flex时使用vw
  • 字号及与字号关联的尺寸使用rem或em
  • 其他情况使用px
  • 工期紧张且目标屏幕尺寸相差较小时可以用rpx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants