对于页面适配,你应该用px还是rem

作者 : 开心源码 本文共887个字,预计阅读时间需要3分钟 发布时间: 2022-05-12 共56人阅读

css中的单位很多,%、px、em、rem,以及比较新的vw、vh等。每个单位都有特定的使用途,比方当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了使用%,其余单位是很难做到的。所以不存在说某个单位是错误的,某个单位是最好的这种说法。

那本文说的页面适配,指的是同样的布局,在不同大小的屏幕上怎样进行缩放、控制间距、宽高、字号等大小。

页面适配的方式有很多:

  • 用px,结合Media Query进行阶梯式的适配;
  • 用%,按百分比自适应布局;
  • 用rem,结合html元素的font-size来根据屏幕宽度适配;
  • 用vw、vh,直接根据视口宽高适配。

在这些大前提下,还需针对少量小的细节做微调。比方用px的时候,可能在小屏幕中,要对某个容器进行transform: scale(.8),适当缩小解决。用rem的时候,需要固定页面的左右间距为10px等。

所以对我来说,虽然网上曾对px、rem和em等单位的优缺点争论过很多,但我的观点可能是,具体情况具体分析。有同学可能要炸了,你这跟没说有啥区别?

对,我的意思跟开篇一样,单论某个单位的好坏是没意义的。我们最关注的是:什么场景中,用什么单位最合适。

也不卖关子了,我就直接列少量自己觉得比较好的实践方式,这些都是根据自己多年的开发经验和大量的调研得到的结论:

  1. 在视觉稿要求固定尺寸的元素上用px。比方1px线,4px的圆角边框。
  2. 在字号、(大多数)间距上用rem。
  3. 慎使用em。

为什么我标题没提到%、vw、vh这几个呢?这几个都是按比例适配,只不过参考对象不一样。

%是参考父容器,vw和vh是参考视口。他们的用场景是非常固定的,比方上文提到的16:9的容器,除了使用%,还有更合适的方式吗?另外,1vw = 1%的视口宽度。所以就真正需要按视口大小适配的时候再使用这个单位吧,用场景相对固定。

接下来我会详细详情一下这3个结论的由来。

为什么慎使用em?

em会叠加计算。在这个机制下太容易犯错了,由于你不知道这段css指定的字号具体是多少。

  1. // HTML
  2. abc
  3. def
  4. abc
  5. // CSS
  6. span {font-size: 1.5em;}

实际的效果是这样的:

对于页面适配,你应该用px还是rem

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 对于页面适配,你应该用px还是rem

发表回复