关于webapp中的文字单位的一些捣腾
轉自：http://xiaoho.com/webapp-font-size/
前言
文字是網頁內容的一枚大將，我們無時無刻都在看著它，只要是你盯屏幕上的任何一個地方都會有文字。地鐵上無時無刻都在盯著屏幕上的人對于文字更為敏感，太大不行，太小TN又看不清上面到底在說什么，有時候車一晃完全是蛋疼的貨。下面一篇文字就是針對webapp的文字做了一些小搗騰，肯定有很多不足的地方，歡迎補充。
有必要了解一下我們所常見的數值。
關于單位
對于webapp上文字用什么單位的問題，一直以來都是讓我們csser頭疼的問題，公說公有理，婆說婆有理。有人說px好，有人說em自適應，有的說百分比牛逼，rem文字出來就跟風說目前最好的就是rem單位。不管是什么說，我們還是要實地搗騰一下。
相對PC端，我們基本要做的就是根據設計圖設計出來的文字大小，PS上是什么字體大小我們就直接在css控制文字的大小，基本都是以px像素為單位的，當然除了自適應頁面的文字需要特別使用em或者rem外。所以對于pc端只要不涉及到自適應頁面，我們通常的做法就是px通吃，一個字“爽”。
pc端中的px像素單位是針對電腦屏幕來說的一個單位，對于桌面上來說，衡量屏幕尺寸的就是分辨率了，1920*1280的分辨率屏幕，橫向就是1920像素，縱向1280個像素點（除高清屏幕外），那我們設置一個字體樣式 font-size:12px 計算得出來的應該是相對于電腦屏幕分辨率的12個單位長度，所以有時候我們會陷入一個誤區：px像素單位是一個絕對長度單位，但是其實它也是一個相對單位長度，它相對它的顯示設備分辨率。
所以在我們印象里面，12像素的文字它所占的面積應該是12*12像素，但其實它不是，起碼在我的設備1920*1080分辨率下它的面積如下：
從圖中我們可以看出每個字所占的大小應該是10~11*12個像素點，從這點上我們可以直接排除px說是絕對像素。
絕對大小值在w3c只有7個值，就是平常我們很少用到的那些英文數值 xx-small,x-small,small,medium,large,x-large,xx-large這7個絕對值，具體的請看這里 7個絕對大小值，而一些我們最平常的用到單位px，em，百分比都不在里面，所以記住了這些個詞兒都不是絕對大小值。
所以我們要做的就是把這幾個數值的文字在手機上做一下實驗，然后再看看他們有什么變化
px像素單位
因為安卓機已經宕機了，公司有沒有配備，因此只有5S的數值，友盟指數來選設備，目前蘋果分辨率比例最大為640*960和640*1136。
測試代碼
<span style="font-size:14px;">CSS: <span class="css-class"><span class="before">.</span>f12</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">12<span class="after">px</span></span>;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>f14</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">14<span class="after">px</span></span>;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>f16</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">16<span class="after">px</span></span>;<span class="paren css-block-close">}</span> html <div class=<span class="string"><span class="before">"</span>f12<span class="after">"</span></span>>這是12像素的文字</div><div class=<span class="string"><span class="before">"</span>f14<span class="after">"</span></span>>這是14像素的文字</div><div class=<span class="string"><span class="before">"</span>f16<span class="after">"</span></span>>這是16像素的文字</div></span>meta標簽沒有設置width=device-width,initial-scale這些屬性值
5S效果如下
假如你手中有安卓設備的，麻煩也拿出來掃一掃，然后在評論中貼出截圖，不勝感激。
假如頭部添加
<span style="font-size:14px;"><span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">meta</span> <span class="builtin xml-attribute">name</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>viewport<span class="after">"</span></span> <span class="builtin xml-attribute">content</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>width=device-width,initial-scale=1.0,maximum-scale=1.0,uer-scalabe=no<span class="after">"</span></span><span class="paren xml-tagangle">/></span></span>5S效果如下
不妨你也可以掃掃下面二維碼
em單位和百分比
這兩個值會從父元素繼承font-size的大小，然后根據自身的給定的值來計算出來，一個父元素div設置為16px（沒有定義html,body字體大小情況下），那么這個父元素他的相對值都是1em和100%（也就是16px），但是假如div包含一個span標簽，span標簽指定為font-size:1.125em;或font-size:120%;，那么這個span標簽文字大小計算如下：
16*1.125em=18px
16*120%=19.2px（顯示應該是19px）
假如在span標簽下又有個一個i標簽，i標簽又指定em或者百分比數值，那么這時span中的font-size其實就是1em或者是100%，那么i標簽就從span標簽繼承這個值，然后計算自己的值。所以有時候計算起來會很麻煩，每次都先計算父元素的值是多少，然后再計算子元素的數值。
因為em和百分有點相似所以把這兩個合并在一起來說，他們的計算值都是基于父元素的值來計算的。
代碼如下
<span style="font-size:14px;">CSS: <span class="css-class"><span class="before">.</span>em-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">0.75<span class="after">em</span></span>;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>em-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">0.875<span class="after">em</span></span>;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>em-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">1<span class="after">em</span></span>;<span class="paren css-block-close">}</span> html <div class=<span class="string"><span class="before">"</span>em-1<span class="after">"</span></span>>這是0<span class="css-class"><span class="before">.</span>75em</span>的文字</div><div class=<span class="string"><span class="before">"</span>em-2<span class="after">"</span></span>>這是0<span class="css-class"><span class="before">.</span>875em</span>的文字</div><div class=<span class="string"><span class="before">"</span>em-3<span class="after">"</span></span>>這是1em的文字</div></span>meta沒有加的情況，效果如下
二維碼如下
加上meta的效果如下
二維碼如下
rem
w3c定義rem是從根元素計算，不管你的div標簽包含N個子元素，你的子元素的字體大小都是直接由根元素計算得出，如下
<span style="font-size:14px;">html<span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span>6<span class="css-length">2.5<span class="after">%</span></span>;<span class="paren css-block-close">}</span> <span class="comment comment-multiline"><span class="before">/*</span> font-size 62.5% = 10px =1rem <span class="after">*/</span></span> body<span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span><span class="css-length">100<span class="after">%</span></span>;<span class="paren css-block-close">}</span> <span class="comment comment-multiline"><span class="before">/*</span> font-size 100% = 10px = 1rem <span class="after">*/</span></span> <span class="css-class"><span class="before">.</span>rem-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span>1.2rem;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>rem-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span>1.4rem;<span class="paren css-block-close">}</span> <span class="css-class"><span class="before">.</span>rem-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw">font-size<span class="after">:</span></span>1.6rem;<span class="paren css-block-close">}</span></span>html是根元素，那為什么還要寫上body，其實也是根據個人習慣來寫，是為了方便自己計算。有html定義屬性的情況下，body就作為老二出現，假如缺少html定義，那么body就是老大。
此外，并不是所有的瀏覽都支持rem單位，不過還好在移動端除了opera 8以外的所有移動瀏覽器都支持rem單位值，更多詳情，請移步caniuse.com，瀏覽器對rem支持情況
代碼還是一樣的代碼，味道還是一樣的味道，下面我們來看看移動瀏覽不加入meta的效果
二維碼如下：
再加一點meta配方，再加一點手段，舔一舔，扭一扭
二維碼如下：
對于取值
想必到現在各位應該會有所明白了吧，其實對于font-size的取值沒有特別之處，最后我覺得是回歸到
對于不加meta標簽的情況下px像素單位、em單位、rem單位的效果圖如下（PC端不做對比）
加上meta為width=device-width 標簽之后
看見上面這圖片，估計你就會恍如大悟了，其實用什么數值已經不重要了。所以我們可以先按照設計稿的數值來輸出，后期不合適再稍作調整。
注意：
假如你頭部的meta設置像淘寶手機網
<span style="font-size:14px;"><meta name=<span class="string"><span class="before">"</span>viewport<span class="after">"</span></span> content=<span class="string"><span class="before">"</span>initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no<span class="after">"</span></span>/></span>那么你在設置文字字體的時候應該是為設計稿的2x，而不是直接按照設計稿輸出。
結語
所以，其實當meta頭部設置寬度=設備寬度的時候，就不存在到底在糾結用什么單位，你喜歡怎么用就怎么用，前提是你把字體統一化，建議用px和rem。對于射擊濕的設計稿應該是以這幾大主流設備分辨率來進行設計，重構師應該最后還是要根據相關的設備做向下和向上兼容。
總結
以上是生活随笔為你收集整理的关于webapp中的文字单位的一些捣腾的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Aski AI: 基于人工智能的在线AI
- 下一篇： ftp端口映射问题（待解决)