2015-10-08 |

手机WebApp中的文字单位

关于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分辨率下它的面积如下:

关于WebApp中的文字单位的一些捣腾(多图)

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

关于WebApp中的文字单位的一些捣腾(多图)

假如头部添加viewport标签后

5S效果如

关于WebApp中的文字单位的一些捣腾(多图)

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没有加的情况,效果如下

关于WebApp中的文字单位的一些捣腾(多图)

加上meta的效果如下

关于WebApp中的文字单位的一些捣腾(多图)

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的效果

关于WebApp中的文字单位的一些捣腾(多图)

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

关于WebApp中的文字单位的一些捣腾(多图)

对于取值

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

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

关于WebApp中的文字单位的一些捣腾(多图)

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

关于WebApp中的文字单位的一些捣腾(多图)

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

注意:

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

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

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

结语

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

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

 

来源:前端观察

 


发表评论

    评价:
    验证码: 点击我更换图片