對於頁面適配,你應該使用px還是rem
作者:名一
https://segmentfault.com/a/1190000015867354
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
abc
def
abc
// CSS
span {font-size: 1.5em;}
實際的效果是這樣的:
先要搞清楚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的稿子,擴展到適配任意寬度的屏幕。(頁面高度跟業務有關,不用關心,寬度肯定是固定的)
接下來拿到視覺稿如下:
測量後主要參數如下:
- 頁面間距10px
- 文字間距10px,字號16px
- A高度100px
- B高度50px,上間距30px
很快就能寫出HTML結構和CSS。
A. 第一段內容B. 第二段內容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屬性:
至於爲何是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的值。
本文沒有任何“PHP是最好的語言”這種類似的導向,都是根據自己的經驗和觀察所得出的結論,若有不對請指正。
頁面適配是很精細的工作,可能你已經有了一套非常熟練的開發方式,那保持下去即可。如果沒有,不妨參考一下這篇文章。