前言
文字是網頁内容的一枚大将，我們無時無刻都在看着它，隻要是你盯螢幕上的任何一個地方都會有文字。地鐵上無時無刻都在盯着螢幕上的人對于文字更為敏感，太大不行，太小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。
測試代碼
CSS:
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>f12</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">12<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>f14</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">14<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>f16</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">16<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
html
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>f12<span class="after">"</span></span>>這是12像素的文字</div>
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>f14<span class="after">"</span></span>>這是14像素的文字</div>
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>f16<span class="after">"</span></span>>這是16像素的文字</div>
meta标簽沒有設定width=device-width,initial-scale這些屬性值
5S效果如下
假如你手中有安卓裝置的，麻煩也拿出來掃一掃，然後在評論中貼出截圖，不勝感激。
假如頭部添加
<span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(91, 161, 207);">meta</span> <span class="builtin xml-attribute" style="color: rgb(255, 255, 255);">name</span><span class="undefined"></span><span class="operator" style="color: rgb(255, 255, 255);">=</span><span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>viewport<span class="after">"</span></span> <span class="builtin xml-attribute" style="color: rgb(255, 255, 255);">content</span><span class="undefined"></span><span class="operator" style="color: rgb(255, 255, 255);">=</span><span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><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>
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和百分有點相似是以把這兩個合并在一起來說，他們的計算值都是基于父元素的值來計算的。
代碼如下
CSS:
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>em-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">0.75<span class="after" style="font-weight: bold;">em</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>em-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">0.875<span class="after" style="font-weight: bold;">em</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>em-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">1<span class="after" style="font-weight: bold;">em</span></span>;<span class="paren css-block-close">}</span>
html
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>em-1<span class="after">"</span></span>>這是0<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>75em</span>的文字</div>
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>em-2<span class="after">"</span></span>>這是0<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>875em</span>的文字</div>
<div class=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>em-3<span class="after">"</span></span>>這是1em的文字</div>
meta沒有加的情況，效果如下
二維碼如下
加上meta的效果如下
二維碼如下
rem
w3c定義rem是從根元素計算，不管你的div标簽包含N個子元素，你的子元素的字型大小都是直接由根元素計算得出，如下
html<span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span>6<span class="css-length" style="color: rgb(0, 153, 0);">2.5<span class="after" style="font-weight: bold;">%</span></span>;<span class="paren css-block-close">}</span> <span class="comment comment-multiline" style="position: relative; z-index: 3; color: rgb(204, 34, 34);"><span class="before" style="color: rgb(187, 170, 170);">/*</span> font-size 62.5% = 10px =1rem <span class="after" style="color: rgb(187, 170, 170);">*/</span></span>
body<span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">100<span class="after" style="font-weight: bold;">%</span></span>;<span class="paren css-block-close">}</span> <span class="comment comment-multiline" style="position: relative; z-index: 3; color: rgb(204, 34, 34);"><span class="before" style="color: rgb(187, 170, 170);">/*</span> font-size 100% = 10px = 1rem <span class="after" style="color: rgb(187, 170, 170);">*/</span></span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>rem-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span>1.2rem;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>rem-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span>1.4rem;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>rem-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">font-size<span class="after">:</span></span>1.6rem;<span class="paren css-block-close">}</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設定像淘寶手機網
<meta name=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>viewport<span class="after">"</span></span> content=<span class="string" style="color: rgb(92, 230, 56); margin: 0px 2px;"><span class="before">"</span>initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no<span class="after">"</span></span>/>
那麼你在設定文字字型的時候應該是為設計稿的2x，而不是直接按照設計稿輸出。
結語
是以，其實當meta頭部設定寬度=裝置寬度的時候，就不存在到底在糾結用什麼機關，你喜歡怎麼用就怎麼用，前提是你把字型統一化，建議用px和rem。對于射擊濕的設計稿應該是以這幾大主流裝置分辨率來進行設計，重構師應該最後還是要根據相關的裝置做向下和向上相容。
轉自：©小黑路人xiaoho.com