當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

关于webapp中的文字单位的一些捣腾

發(fā)布時間：2024/5/14 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了关于webapp中的文字单位的一些捣腾小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

轉(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。

測試代碼

CSS: .f12{font-size:12px;} .f14{font-size:14px;} .f16{font-size:16px;} html <div class="f12">這是12像素的文字</div><div class="f14">這是14像素的文字</div><div class="f16">這是16像素的文字</div>

meta標簽沒有設(shè)置width=device-width,initial-scale這些屬性值

5S效果如下

假如你手中有安卓設(shè)備的，麻煩也拿出來掃一掃，然后在評論中貼出截圖，不勝感激。

假如頭部添加

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和百分有點相似所以把這兩個合并在一起來說，他們的計算值都是基于父元素的值來計算的。

代碼如下

CSS: .em-1{font-size:0.75em;} .em-2{font-size:0.875em;} .em-3{font-size:1em;} html <div class="em-1">這是0.75em的文字</div><div class="em-2">這是0.875em的文字</div><div class="em-3">這是1em的文字</div>

meta沒有加的情況，效果如下

二維碼如下

加上meta的效果如下

二維碼如下

rem

w3c定義rem是從根元素計算，不管你的div標簽包含N個子元素，你的子元素的字體大小都是直接由根元素計算得出，如下

html{font-size:62.5%;} /* font-size 62.5% = 10px =1rem */ body{font-size:100%;} /* font-size 100% = 10px = 1rem */ .rem-1{font-size:1.2rem;} .rem-2{font-size:1.4rem;} .rem-3{font-size:1.6rem;}

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)

那么你在設(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Aski AI: 基于人工智能的在线AI
下一篇： ftp端口映射问题（待解决)