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