手机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像素的文字它所占的面积应该是1212像素，但其实它不是，起码在我的设备19201080分辨率下它的面积如下：

从图中我们可以看出每个字所占的大小应该是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。

测试代码

.f12{font-size:12px;}

.f14{font-size:14px;}

 

.f16{font-size:16px;}

<div class="f12">这是12像素的文字</div>  

<div class="f14">这是14像素的文字</div>  

 

<div class="f16">这是16像素的文字</div>  

meta标签没有设置width=device-width,initial-scale这些属性值

5S效果如下

假如头部添加viewport标签后

5S效果如

em单位和百分比

这两个值会从父元素继承font-size的大小，然后根据自身的给定的值来计算出来，一个父元素div设置为16px（没有定义html,body字体大小情况下），那么这个父元素他的相对值都是1em和100%（也就是16px），但是假如div包含一个span标签，span标签指定为font-size:1.125em;或font-size:120%;，那么这个span标签文字大小计算如下： 161.125em=18px 16120%=19.2px（显示应该是19px） 假如在span标签下又有个一个i标签，i标签又指定em或者百分比数值，那么这时span中的font-size其实就是1em或者是100%，那么i标签就从span标签继承这个值，然后计算自己的值。所以有时候计算起来会很麻烦，每次都先计算父元素的值是多少，然后再计算子元素的数值。 因为em和百分有点相似所以把这两个合并在一起来说，他们的计算值都是基于父元素的值来计算的。 代码如下

.em-1{font-size:0.75em;}

.em-2{font-size:0.875em;}

.em-3{font-size:1em;}

<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，其实也是根据个人习惯来写，是为了方便自己计算。有html定义属性的情况下，body就作为老二出现，假如缺少html定义，那么body就是老大。

此外，并不是所有的浏览都支持rem单位，不过还好在移动端除了opera 8以外的所有移动浏览器都支持rem单位值。

代码还是一样的代码，味道还是一样的味道，下面我们来看看移动浏览不加入meta的效果

再加一点meta配方，再加一点手段，舔一舔，扭一扭

对于取值

想必到现在各位应该会有所明白了吧，其实对于font-size的取值没有特别之处，最后我觉得是回归到

对于不加meta标签的情况下px像素单位、em单位、rem单位的效果图如下（PC端不做对比）

加上meta为width=device-width 标签之后

看见上面这图片，估计你就会恍如大悟了，其实用什么数值已经不重要了。所以我们可以先按照设计稿的数值来输出，后期不合适再稍作调整。

注意：

假如你头部的meta设置像淘宝手机网

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"/>  

那么你在设置文字字体的时候应该是为设计稿的2x，而不是直接按照设计稿输出。

结语

所以，其实当meta头部设置宽度=设备宽度的时候，就不存在到底在纠结用什么单位，你喜欢怎么用就怎么用，前提是你把字体统一化，建议用px和rem。对于射击湿的设计稿应该是以这几大主流设备分辨率来进行设计，重构师应该最后还是要根据相关的设备做向下和向上兼容。

如果你觉得文章写的还不错，那就关注一下我们的公众号吧，长按下面的二维码点击识别图中二维码即可。

 

来源:前端观察