关于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:
.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标签没有设置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
<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单位值,更多详情,请移步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
关于webapp中的文字单位的一些捣腾的更多相关文章
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- html5--6-16 CSS3中的文字与字体
html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...
- html5--6-23 CSS3中的文字与字体
html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
- html5--6-19 CSS3中的文字与字体
html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...
- [安卓基础] 008.Android中的显示单位
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- Cocos2d-x lua 游戏中的文字和标签
游戏场景中的文字分为静态文字和动态文字,在图片中的文字为静态文字,不能通过程序访问,而且无法动态修改内容,但是表现力丰富.动态文字一般需要通过程序访问,需要动态修改内容可以通过标签(Label or ...
- 实现password框中显示文字提示的方式
其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...
- VC中实现文字竖排的简单方法
好多人都觉得在VC中实现文字竖排是一件很难的事情,其实可以使用“躺”着的字体很方便的实现文字竖排. Windows中有一些字体是“躺”着的,例如:@Fixedsys.@System.@宋体.@黑体等等 ...
随机推荐
- 教你如何理解SQL
1. SQL 是一种声明式语言 首先要把这个概念记在脑中:“声明”. SQL 语言是为计算机声明了一个你想从原始数据中获得什么样的结果的一个范例,而不是告诉计算机如何能够得到结果.这是不是很棒? (译 ...
- CentOS mini版安装后增加gcc编译环境
使用如下命令即可: sudo yum install gcc gcc-c++ make -y
- 使用 hibernate 存取大对象数据类型(clob和blob)
数据库表如下: book表 id 该表的主键.number类型. photo 代表图书的图片,blob类型. description 图书的描述,clob类型. 使用 hibernate3 往 boo ...
- JSON 解析第三方框架
常见的 JSON 解析第三方框架 JSONKit(最快) SBJson TouchJSON 以上三个框架的性能依次降低! 介绍 JSONKit 第三方框架的目的 JSON 的解析并不是表面上那么简单 ...
- 远程控制利器TeamViewer使用教程(图)
TeamViewer是什么? 他是一款免费的可以穿透内网的远程控制软件,可以实现桌面共享,文件传送等功能,简单一点说就是和QQ远程协助一样,但是比QQ的远程协助功能更为强大. TeamViewer与木 ...
- golang Aes
package models import ( "bytes" "crypto/aes" "crypto/cipher" "err ...
- 第一个MVC模型
根据慕课网的视频自学来的. 关于MVC的简介和一些常识:http://www.cnblogs.com/jobscn/archive/2011/11/08/2240725.html MVC模式 : MV ...
- Delphi XE6 试用Android视频采集
FMX支持视频采集,具体见FMX.Media,提供了很类支持音频.视频的处理. 按帮助文档,用Note3做了测试,结果,效率太低,不可用. 具体可查询帮助Video Capturing一节,我就是按这 ...
- POJ 3481 Double Queue STLmap和set新学到的一点用法
2013-08-08 POJ 3481 Double Queue 这个题应该是STL里较简单的吧,用平衡二叉树也可以做,但是自己掌握不够- -,开始想用两个优先队列,一个从大到小,一个从小到大,可是 ...
- jquery validation plugin 使用
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...