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

前言

文字是网页内容的一枚大将，我们无时无刻都在看着它，只要是你盯屏幕上的任何一个地方都会有文字。地铁上无时无刻都在盯着屏幕上的人对于文字更为敏感，太大不行，太小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