关于webapp中的文字单位的一些捣腾
发布在css研究2015年8月7日view:27299移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
写完之后发现,这篇破文章用的图片比较多,假如流量不多的童鞋,看到这段文字马上按返回键,回家开电脑再看,高帅富者直接忽略。

前言

文字是网页内容的一枚大将,我们无时无刻都在看着它,只要是你盯屏幕上的任何一个地方都会有文字。地铁上无时无刻都在盯着屏幕上的人对于文字更为敏感,太大不行,太小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:
.f12{font-size:12px;} .f14{font-size:14px;} .f16{font-size:16px;}
html
这是12像素的文字

这是14像素的文字

这是16像素的文字

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

5S效果如下

假如你手中有安卓设备的,麻烦也拿出来扫一扫,然后在评论中贴出截图,不胜感激。

假如头部添加

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,uer-scalabe=no"/>

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:
.em-1{font-size:0.75em;} .em-2{font-size:0.875em;} .em-3{font-size:1em;}
html
这是0.75em的文字

这是0.875em的文字

这是1em的文字

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单位值,更多详情,请移步caniuse.com,浏览器对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。对于射击湿的设计稿应该是以这几大主流设备分辨率来进行设计,重构师应该最后还是要根据相关的设备做向下和向上兼容。

最后祝单身狗们光棍节快乐,我们不担心家里有人刷爆卡

那么你的观点在哪里?

本文地址:http://xiaoho.com/?p=867
原创文章,转载请注明来自:◎小黑路人xiaoho.com

评论
发表评论
2个月前

@小贴贴七夏 字体用rem在不同设备差距会很大 可以根据dpr的不同值 再用px做单位来做字体适配

2个月前

@alian 是的

2年前

如果设计稿是750,设备dpr是2,initial-scale=0.5,字体应该还是按照设计稿的大小来设置吧?

2年前
添加了一枚【评注】:123
2年前
添加了一枚【评注】:123
2年前
添加了一枚【评注】:哈哈哈
2年前
添加了一枚【评注】:123
2年前
添加了一枚【评注】:123
2年前

然而需求往往不是这样的。需求往往是要求:同一个应用/页面,在所有设备上的大小都一样,或者说,占据真实屏幕的高度一样,换句话说:在iPhone 5 和iPhone 6 Plus 上,他们都占据了5厘米的高度……嗯。与单位无关,而与 dpr 有关

3年前

...

3年前
添加了一枚【评注】:这句话也有问题,淘宝的meta是更具像素密度动态计算的
3年前
添加了一枚【评注】:这句话有问题
3年前

文中有提到淘宝的手机端页面,不知道有没有人注意过,它的banner 宽度 是用 rem 来写的,字体反而是用的 px,html 上根据不同的分辨率设置不同的字体大小,比如iphone5里,html 里font-size:40px; 而 banner 的宽度不管在哪种 屏幕中都是16rem 这个是为什么呢?

3年前
添加了一枚【评注】:也是就说,meta对于px的实际大小也是能更改的~
3年前
添加了一枚【评注】:这是什么意思呢
3年前

学习了!

3年前

@Jinbo 嗯嗯,这个的话,我感觉就是要看需求是针对设备了。假如说320px的用户不到1%,那么我觉得需要权衡了,毕竟木有完美的,只有合适的。

3年前

老大让调研rem,有了这篇文章不用了,哈哈

3年前
赞了此文章!
3年前
赞了此文章!
3年前

同上,在3.5寸,4寸,4.7寸,5.5寸上,文字都表现为12px,明显是不好的. 320px 375px 432px 480px 应该对应的放大一点才行

3年前

如果是px那么就在不同的屏幕上都是一样的大小,这显然不是很好。

3年前
添加了一枚【评注】:hao wan
3年前
添加了一枚【评注】:嗯,这里根据w3c的文档,px确实是绝对长度单位,目前已知的绝对长度为6个,分别是:in, cm, mm, pt, pc,px。
3年前

@疯一般的小强 貌似已经有说过了,假如头部使用0.5的缩放比例的话,那么写页面的时候就要按照2倍的字体来,不过这个因不同手机系统稍微调整,比如说诺基亚的最好是按设计图,苹果安卓类的可以根据像素比来做不同调整,你说一概而论说用同一个像素来干掉所以手机浏览器兼容性,那估计调试兼容的时候估计都要崩溃了,所以才会有高清屏和非高清屏调用不同的图片大小。

3年前
添加了一枚【评注】:121212
3年前
添加了一枚【评注】:求问楼主 又遇到使用 phoneGap 转化应用后字体整体比网页显示变小吗? 设计稿的字体大小是按照网页来设置的, 这是应该怎么办? 
3年前
添加了一枚【评注】:根据css2.1,实际上它就是一个绝对长度单位(http://www.w3.org/TR/CSS21/syndata.html#length-units)。如果一个长度单位所指定的长度是根据另一个长度属性来确定的,那么它是相对长度单位。
3年前

@松鼠闹IT 元素的宽度可以其实可以用rem的方法来搞定,具体可以参考winter做法http://html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold

3年前

@文艺IT童鞋 被你猜中了。。哈哈

3年前

有个问题,就是关于元素的高宽的单位,楼主是怎么处理的?

3年前

楼主想要通过错别字的方式增加互动哈~~

3年前

受教了

3年前

@随Yu而安 你这个字体顺序是先左到右,所以假如设计师按照雅黑来做设计稿,那么你就应该把雅黑提前。

3年前

@杰西_擦擦_F5 语文老是是数学教的 - .- 好吧,确实么有这个成语,改过

3年前

恍然大悟,不是 恍如大悟吧? (对不起,我有轻微强迫症)

3年前

作为手机webapp新手,我们设计师也是新手,在设计的时候字体总是没有选择好,我开发时 font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;

但最终即使我字体大小对了,但是由于设计师字体不同 效果跟设计稿不同,你们设计师对于字体都怎么选的呢?

3年前

小黑童鞋研究的好细腻啊!

3年前

@AprilJTsai 确实是,刚刚已经改过了,多谢提醒

3年前

meta标签的属性:intical-scale,应该是initial-scale吧?

3年前

@小黑 我深深觉得我是错别字大王,没有仔细仔细检查,要反思,不能怪输入法太智能了。

3年前

刚好你的评论里也有错别字耶 :P

3年前

好了,刚刚在公司没有仔细检查错别字,回来补上了, 肯定还有很多部队的地方,希望大家指出,3Q

WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏