美文网首页让前端飞Web前端之路视觉艺术
对于页面适配,该用px还是rem

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

作者: 前端_周瑾 | 来源:发表于2020-03-16 17:50 被阅读0次

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、wh、%呢? 这几个都是按比例适配,只不过参考的对象不一样。
%是参考父容器。vw 和 vh是参考视口,他们的使用场景是非常固定的,比如上文提到的16:9的容器,除了%,还有更合适的方式嘛?另外 1vw = 1%的视口宽度,所以真正需要按视口大小适配的时候在用这个单位吧,使用常见相对固定

接下来介绍一下这3个结论的由来:

为什么慎用 em ?

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

    <!-- html -->
    <span>
      ABC
      <span>DEF</span>
      ABC
    </span>

      /* css */
      span {
        font-size: 1.5em;
      }
效果图

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

外层的span的字号是16px(浏览器默认),所以1.5em之后的就是24px,由于字号是继承的、导致内存的span的字号继承过来是24px,在经过1.5em之后就变成了36px。

所以就算要用em的话,尽量不要在继承属性(例如:font-size)上,除非你真的清除你在做什么!
比如你想跟字号自动调整字符间距,可以这么做:

      .content {
        font-size: 1em;
        letter-spacing: 0.03em;
      }

但是仔细想一下,letter-spacing由 .content的字号觉得,而它又由html的字号觉得,那为什么letter-spacing不直接用rem呢?

rem vs. px

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

px的性值觉得了它只能用于固定尺寸,也就是说,如果视觉设计师规定,这个边框的宽度必须是2px。,那这种情况就不不要讨论了

除了固定尺寸用px,其他大部分情况都可以使用rem
现在考虑一个实际的开发常见,一般来说都是先有视觉设计稿才能开发,两种情况:
1、假设视觉稿按 iphone6 和 iphone6P ,以及其他尺寸的设计各出了一份,那么你就按照media query去适配。
2、设计师只给一种机型的视觉稿,以iphone6为例,750x1334,两倍屏下转换后是375 x 667

第一种情况也不谈论了,通过media query断点适配后,其实你处理的还是第二种情况,

第二种的意思是,你要根据宽度为375px的高稿子,扩展到适配任意宽度的屏幕(页面高度跟业务有关,不用关心,宽度肯定是固定的)
接下来拿到视觉稿如下:

视觉稿

测量如主要参数如下:

1、页面间距10px;
2、文字间距10px,字号16px
3、A高度100px
4、B高度50px,上间距30px

很快就能写出HTML结构和css

<div class="box box-1">A. 第一段内容</div>
<div class="box box-2">B. 第二段内容</div>
body {
    padding: 10px;
    background: #f6f0ee;
}
.box {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
}
.box-1 {
    height: 100px;
    background: #1daedc;
}
.box-2 {
    margin-top: 30px;
    height: 50px;
    background: #ddbe97;
}

完美符合要求
然后视觉开始提要求了,大屏上要把字体放大,间距放大,这时候的一个选择是,问设计师要适配哪种屏幕,字号是多少,间距是多少,技术上在用Media Query微调

      @media (min-width: 414px) {
        /* 这里不写了,按视觉要求 */
      }

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

      html {
        font-size: 16px;
      }
      .box {
        font-size: 1rem;
      }
      .box-1 {
        height: 6.25rem;
      }
      .box-2 {
        height: 3.125rem;
        margin-top: 1.875rem;
      }

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

      @media (min-width: 414px) {
        html {
          font-size: 17.664px;
        }
      }
    //17.664 = 414*16 /375

由此可以得到html的font-size计算公式为fontsize = deviceWidth * 16 / 375
前提你的html有这条meta属性:

<meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no"
    />

至于为什么是16px,这个后面在介绍,所以rem有个明显的有点,它可以通过少量代码解决大部分问题。

如果还存在某些细节不够满意,那再用Media Query微调,这种主观的 “好看”、“不好看”, 可能注定没办法自动化解决吧
关于rem兼容,桌面端的话仅在IE9+支持,vw和vh一样,所以如果要考虑IE8的兼容性,那没别的选择只能用px吧,至于移动端,支持情况不错,可以在生产环境使用

htm的font-size该如何设置

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

为了方便大家以后参考方便,我列了一个常用的Media Query断点(iphone6为基准)

      @media only screen and (min-width: 320px) {
        html {
          font-size: 13.65px;
        }
      }
      @media only screen and (min-width: 360px) {
        html {
          font-size: 15.36px;
        }
      }
      @media only screen and (min-width: 375px) {
        html {
          font-size: 16px;
        }
      }
      @media only screen and (min-width: 390px) {
        html {
          font-size: 16.64px;
        }
      }
      @media only screen and (min-width: 414px) {
        html {
          font-size: 17.664px;
        }
      }
      @media screen and (min-width: 640px) {
        html {
          font-size: 27.31px;
        }
      }      @media only screen and (min-width: 320px) {
        html {
          font-size: 13.65px;
        }
      }
      @media only screen and (min-width: 360px) {
        html {
          font-size: 15.36px;
        }
      }
      @media only screen and (min-width: 375px) {
        html {
          font-size: 16px;
        }
      }
      @media only screen and (min-width: 390px) {
        html {
          font-size: 16.64px;
        }
      }
      @media only screen and (min-width: 414px) {
        html {
          font-size: 17.664px;
        }
      }
      @media screen and (min-width: 640px) {
        html {
          font-size: 27.31px;
        }
      }

大家可能还会看到一些文章建议把font-size设置为62.5%;
因为刚提到的大部分浏览器默认的字号是16px, 因此换算成百分比就是62.5 = 1 / 16;

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

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

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

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

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

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

html {
    font-size: 4.266667vw;
}

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

如何提高rem 的可读性

我们来谈最后一个话题
当你知道html的font-size怎么设置后,肯定想问,难道我每次写代码时,还得做个除法?把rem的值计算出来嘛?
我相信稍微‘现代’一点的开发者,都会用到css预处理,基于这个工具,事情就好办很多了。,以less为例,两步操作如下:

// 按照iphone6的视觉稿,基准字号16px
// 因此可以设置一个less变量

@px: 16rem;

// 通过less内置的出发自动运算
// 比如用到16px的字号时候,携程16/@px, 最后会计算成1rem

.example {
  font-size: 16 / @px;
  margin: 20 / @px;
  padding: 20 / @px 10 / @px;
}

小结

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

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

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

相关文章

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

    css中的单位很多,%、px、em、rem、vw、vh等。每个单位都用特点的用途,比如当需要设置一个矩形的宽高比是...

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

    css单位:%,px,em,rem,vw,vh等 eg:设置一个矩形的宽高比为16:9,并且岁屏幕宽度自适应时,除...

  • px 与 rem 的选择

    px 与 rem 的选择?对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。对于需要适配各种...

  • vue-cli移动端项目的适配完美解决方案

    移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。所以不用px;根字体:字体的大小px;...

  • 尺寸

    px与rem的选择? 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,都使用px即可。对于需要适配各种移动...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • css单位px、rem、vw

    css单位 px 、rem 、vw 都是相对单位 rem rem 的计算是相对于 html 页面的 font-si...

  • vue做rem适配

    安装postcss-px2rem及px2rem-loader 2.创建rem文件 3在main.js中引入适配文件...

  • vue做移动端适配,借助px2rem 插件方便的将px单位转为了

    vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem。 1、安装 npm install px2...

  • vue3.x移动端适配px2rem

    1、什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸。前端开发可以直接...

网友评论

    本文标题:对于页面适配,该用px还是rem

    本文链接:https://www.haomeiwen.com/subject/wjknehtx.html