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

  • 时间:2018-08-04 21:30 作者:一米阳光HOME 来源:一米阳光HOME 阅读:101
  • 扫一扫,手机访问
摘要:css中的单位很多,%、px、em、rem,以及比较新的vw、vh等。每个单位都有特定的使用途,比方当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了使用%,其余单位是很难做到的。所以不存在说某个单位是错误的,某个单位是最好的这种说法。那本文说的页面适配,指的是同样的布局,在不同大小

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

先要搞清楚em的计算原理,它是根据当前元素的字号按比例计算的。

外层span的字号是16px(浏览器默认值),所以1.5em之后是24px。因为字号是继承的,导致内层span的字号继承过来是24px,再经过1.5em之后就成了36px。

所以,就算要使用em的话,尽量不要使用在继承属性(font-size)上,除非你真的清楚你在做什么!

比方你想根据字号自动调整字符间距,可以这么做:

  1. .content {
  2. font-size: 1rem;
  3. letter-spacing: .03em;
  4. }

但再仔细想一下,letter-spacing由.content的字号决定,而它又由html的字号决定。那为什么letter-spacing不直接使用rem呢?

rem vs. px

px是我比较喜欢的一个单位,简单又直接。但理性驱使,还是要正当考虑用场景。

px的性质决定了它只能使用于固定尺寸。也就是说,假如视觉设计师规定,这个边框宽度必需是2px。那这种情况下就不需要探讨了。

除了固定尺寸使用px,其余大部分情况都可以用rem。

现在考虑一个实际的开发场景,一般来说都是先有视觉稿才能开发。两种情况:一、假设视觉稿按iPhone 6和iPhone 6+,及其余尺寸各出了一份,那你就按照Media Query去适配。二、设计师只给你一种机型的视觉稿,以iPhone 6为例,750x1334,2倍屏下转换后是375x667。

第一种情况也不探讨了,通过Media Query断点适配后,其实你解决的还是第二种情况。

那第二种的意思是,你要根据宽度为375px的稿子,扩展到适配任意宽度的屏幕。(页面高度跟业务有关,不使用关心,宽度一定是固定的)

接下来拿到视觉稿如下:

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

测量后主要参数如下:

  • 页面间距10px
  • 文字间距10px,字号16px
  • A高度100px
  • B高度50px,上间距30px

很快就能写出HTML结构和CSS。

  1. A. 第一段内容
  2. B. 第二段内容
  3. body {
  4. padding: 10px;
  5. background: #f6f0ee;
  6. }
  7. .box {
  8. padding: 10px;
  9. font-size: 16px;
  10. color: #fff;
  11. box-sizing: border-box;
  12. }
  13. .box-1 {
  14. height: 100px;
  15. background: #1daedc;
  16. }
  17. .box-2 {
  18. margin-top: 30px;
  19. height: 50px;
  20. background: #ddbe97;
  21. }

完美符合要求。

而后视觉开始提要求了,大屏上要把字体放大、间距放大。

这时候的一个选择是,问设计师是要适配哪种屏幕,字号是多少,间距是多少。技术上再通过Media Query微调。

  1. @media(min-width: 414px) {
  2. // 这里不写了,按视觉要求量化就可
  3. }

另一个选择可以反过来做。首先按rem作为字号、容器高度、外间距的单位。那么代码可以改为:

  1. html {
  2. font-size: 16px;
  3. }
  4. .box {
  5. font-size: 1rem;
  6. }
  7. .box-1 {
  8. height: 6.25rem;
  9. }
  10. .box-2 {
  11. margin-top: 1.875rem;
  12. height: 3.125rem;
  13. }

其余的样式规则不变,目前的结果和之前的是等价的。假如再加一点魔法,通过Media Query改变iPhone 6+的html字号,其余元素的属性就会自动变化。

  1. @media(min-width: 414px) {
  2. html {
  3. font-size: 17.664px;
  4. }
  5. }

17.664 = 414 * 16 / 375。

由此可以得到html的font-size计算公式为:fontSize = deviceWidth * 16 / 375;

前提是你的html有这条meta属性:

至于为何是16px,这个后面再详情。所以rem有个显著的优点,它可以通过一些代码处理大部分问题

假如还存在某些细节不够满意,那再使用Media Query微调。这种主观的“好看”、“不好看”,可能注定没法自动化处理吧。

关于rem兼容性。桌面端的话仅在IE9+支持。vw和vh一样。所以假如要考虑IE8的兼容性,那没别的选择只能使用px吧。至于手机端,支持情况不错,可以在生产环境用。

html的font-size该如何设置

因为(大部分)浏览器的默认字号为16px,所以一般来说把html的font-size归一化为16px是比较合适的实践方式。同时可以参考这篇文章。

为了大家以后参考方便,我列了少量常使用的Media Query断点(以iPhone 6为基准)。

  1. @media only screen and (min-width: 320px) {
  2. html {
  3. font-size: 13.65px;
  4. }
  5. }
  6. @media only screen and (min-width: 360px) {
  7. html {
  8. font-size: 15.36px;
  9. }
  10. }
  11. @media only screen and (min-width: 375px) {
  12. html {
  13. font-size: 16px;
  14. }
  15. }
  16. @media only screen and (min-width: 390px) {
  17. html {
  18. font-size: 16.64px;
  19. }
  20. }
  21. @media only screen and (min-width: 414px) {
  22. html {
  23. font-size: 17.664px;
  24. }
  25. }
  26. @media screen and (min-width: 640px) {
  27. html {
  28. font-size: 27.31px;
  29. }
  30. }

大家可能还会看到少量文章中建议把html字号设成62.5%。

  1. html {
  2. font-size: 62.5%;
  3. }

由于刚提到浏览器默认的字号为16px,因而换算成百分比就是62.5% = 1 / 16。

那为什么要使用百分比呢?由于考虑到辅助功能和浏览器设置。对于部分使用户,可能会在手机或者浏览器的设置中增大手机字号,这意味着对方平常看字是很费力的,所以他才要放大。那把html的字号设置成百分比就很贴心了,会随着手机设置改变页面的字号。

在手机上设置默认字号是很常见的现象,所以假如是一个充满人道主义的排版,我觉得使用百分比是非常高尚的。它不仅从视觉角度去考虑美,更加做到了“使用户至上”这四个字。

好,回到现实环境。只有国外那些对Accessibility要求比较高的国家,才会真正去落实这些。但国内的话,老实说,更注重外观的美。素来没有哪家互联网公司的页面会去兼容Screen Reader,也很少做Keyboard Shortcut。

扯远了,就算你看到使用62.5%的情况,有些间距也是不正当的,都做的不太好,特别是把文案做到图片上的,对字号根本不敏感。假如出发点不是为了使用户的视觉接受能力,那就别使用62.5%;假如想做,就把缩放考虑到位了,别做半吊子。

另外,针对本小节开头使用16px的情况,这里再给大家提供一招(我调研了一下目前没人这么使用,也是灵光一现才想到的)。

使用Media Query的缺点是什么?它是分段函数,对于宽度在[320, 360)区间内的屏幕,会适使用同一套方案。最完美的应该是线性函数,怎样做?很简单,使用vw就可。

  1. html {
  2. font-size: 4.266667vw;
  3. }

使用1行代码代替之前6个冗长的Media Query,还不错吧。

如何提高rem的可读性

我们来谈最后一个话题。

当你知道html的font-size怎样设置后,一定想问,难道我每次写代码时,还得做个除法,把rem的值计算出来吗?

我相信略微“现代”一点的开发者,都会使用到CSS预解决。基于这个工具,事情就很好办了,以LESS为例,两步操作如下:

  1. // 1\. 按iPhone 6的视觉稿,基准字号为16px,因而可以设置一个LESS变量。
  2. @px: 16rem;
  3. // 2\. 通过LESS内置的除法自动运算。比方使用到16px的字号时,写成16/@px就可,最后会计算成1rem。
  4. .example {
  5. font-size: 16/@px;
  6. margin: 20/@px 0;
  7. padding: 20/@px 10/@px;
  8. }

小结

本文给大家详情了rem的适配方式,如何设置html的font-size,如何更快地书写rem的值。

本文没有任何“PHP是最好的语言”这种相似的导向,都是根据自己的经验和观察所得出的结论,若有不对请指正。

页面适配是很精细的工作,可能你已经有了一套非常熟练的开发方式,那保持下去就可。假如没有,不妨参考一下这篇文章。

作者:名一

https://segmentfault.com/a/1190000015867354

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)
手机二维码手机访问领取大礼包
返回顶部