首頁 >web前端 >css教學 >css中單位的使用：選擇px或rem

css中單位的使用：選擇px或rem

不言原創: 2018-08-03 09:55:123507瀏覽

這篇文章介紹給大家的文章內容是關於css中單位的使用：選擇px還是rem，有很好的參考價值，希望可以幫助到有需要的朋友。

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等單位的優缺點爭論過很多，但我的觀點可能是，具體情況具體分析。有同學可能要炸了，你這跟沒說有啥差別？

對，我的意思跟開篇一樣，單論某個單位的好壞是沒意義的。我們最關注的是：在什麼場景中，使用什麼單位最適合。

也不賣關子了，我就直接列出一些自己覺得比較好的實踐方式，這些都是根據自己多年的開發經驗和大量的研究得到的結論：

#在視覺稿要求固定尺寸的元素上使用px。例如1px線，4px的圓角邊框。
在字號、（大多數）間距上使用rem。
慎用em。

為什麼我標題沒提到%、vw、vh這幾個呢？這幾個都是比例適配，只不過參考對像不一樣。

%是參考父容器，vw和vh是參考視窗。他們的使用場景是非常固定的，例如上文提到的16:9的容器，除了用%，還有更適合的方式嗎？另外，1vw = 1%的視口寬度。所以就真正需要依照視窗大小適配的時候再用這個單位吧，使用場景相對固定。

接下來我會詳細介紹一下這3個結論的由來。

為什麼慎用`em`？

em會疊加計算。 在這個機制下太容易犯錯了，因為你不知道這段css指定的字號具體是多少。

// HTML
<span>
    abc
    <span>def</span>
    abc
</span>

// CSS
span {font-size: 1.5em;}

實際的效果是這樣的：

css中單位的使用：選擇px或rem

#先搞清楚em的計算原理，它是根據當前元素的字號按比例計算的。

外層span的字號是16px（瀏覽器預設值），所以1.5em之後是24px 。由於字號是繼承的，導致內層span的字號繼承過來是24px，再經過1.5em之後就成了36px 。

所以，就算要用em的話，盡量不要用在繼承屬性（font-size）上，除非你真的清楚你在做什麼！

例如你想根據字號自動調整字元間距，可以這麼做：

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

但再仔細想一下，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的稿子，扩展到适配任意宽度的屏幕。（页面高度跟业务有关，不用关心，宽度肯定是固定的）

接下来拿到视觉稿如下：

css中單位的使用：選擇px或rem

测量后主要参数如下：

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

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

<p>A. 第一段内容</p>
<p>B. 第二段内容</p>

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 {
    margin-top: 1.875rem;
    height: 3.125rem;
}

其他的样式规则不变，目前的结果和之前的是等价的。如果再加一点魔法，通过Media Query改变iPhone 6+的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>

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

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

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

html的font-size该如何设置

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

为了大家以后参考方便，我列了一些常用的Media Query断点（以iPhone 6为基准）。

@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;
    }
}

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

html {
    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为例，两步操作如下：

// 1. 按iPhone 6的视觉稿，基准字号为16px，因此可以设置一个LESS变量。
@px: 16rem;

// 2. 通过LESS内置的除法自动运算。比如用到16px的字号时，写成16/@px即可，最后会计算成1rem。
.example {
    font-size: 16/@px;
    margin: 20/@px 0;
    padding: 20/@px 10/@px;
}

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

css中單位的使用：選擇px或rem

為什麼慎用em？

rem vs. px

html的font-size该如何设置

如何提高rem的可读性

相關文章

為什麼慎用`em`？