前端宽度一至显示宽度不一致_前端怎么根据屏幕不同适配文字大小?

博客讨论了UI设计中不同屏幕尺寸下字体大小和排版的适配问题。作者指出,盲目追求100%还原设计稿,特别是在字号方面,并非最佳实践。建议在不同屏幕尺寸下,重点保持元素位置和间距的一致性,而非字号的绝对一致。使用px作为单位可以提供更好的清晰度,而rem可能导致在高分辨率屏幕上的显示问题。作者强调,用户体验应关注信息获取和功能性操作的交互逻辑,而非过分追求视觉细节的一致性。
摘要由CSDN通过智能技术生成

理论上讲,不同屏幕下显示同样文字大小和排版并非理智的选择。

如果初级的UI打算让你实现100%还原,那么ta的意思确实是需要在各个机型实现完美一致,但是稍微有点经验的UI都不会告诉你100%还原是包括字号在内均需要完美还原。

例如给了一份375的设计稿,那么只需要适配375的机型,在375下完美还原UI视觉图,但是如果换成414,那么就很明显,扩大字体带来的视觉优势会完全被信息过少的缺陷抹平甚至反超。在414下,理性的100%还原应当是指元素的position,内外边距等差异性需要与375保持客观的一致(例如px)。

使用rem也无可厚非,但是想一想,就会明白,如果你在一个4K屏幕上和1080P的屏幕上同时浏览某个网站,4K的条件下,内边距外边距 尤其是字号均放大4倍……我不觉得这种处理会更加讨用户的喜欢(4K下通常会有DPI缩放,那么当你再设置rem后,会将rem与DPI同时乘算)

是的,我本人是忠实的px党,虽然接触过px2rem等处理框架,但我并不推荐。

常见的UI库也很少见使用em,rem等布局,原因就在于元素的绝对宽高与用户体验的一致性并无关联,体验的一致性应当表现在用户对于信息获取和功能性操作的交互逻辑上,而不应该本末倒置,使用字号统一这种无效且让人厌烦的东西。

我有没有说过rem,em,pt,dp这种东西会让字体在多数情况下变模糊?(笑

不理解的话,可以看一下px2rem的操作方法,以及了解下字体为什么会变糊。

当你哪天自己使用了高分屏,你就会理解我说的为什么不推荐你这样子做适配了(体验吊差)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值