推荐font-size的单位 % em单位

在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。
~~~font-size可以实现多行文本的垂直居中，究其原因是因为 em的继承性和一个基本事实 line-box 的高度 line-height总是约等于字体大小的1.16倍

所以设置 div.vmiddle{font-size:10em; height:1.16em;}那么这个line-box中的裸文字刚好是垂直居中的。其他多行文字设置为inline-block 然后跟裸文字基线对齐即可实现垂直居中

浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。不过还有一种更方便的方法，继续往下看！

这种方法要用到%单位（仅1次），其实%和em简单的话可以理解成前者只是比后者多2个0。为了简化font-size的换算，大家可以在css中的body中先全局声明font-size=62.5%，这里的%的算法和em一样，100%=16px，1px=6.25%，10px=62.5%，也就是定义了默认字体大小为10px。很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！由于em具有会继承父级出血元素的字体大小的特点，这是的1em=10px，所以12px=1.2em。px与em的转换通过10就可以得来，很方便了吧！

此外有一点必须要注意，可能是IE处理汉字时，对于浮点的取值精确度有限，在body下62.5%出来的12px字体比直接定义的要大一点点，只要将62.5%换成63%就可以了。通过以上对CSS代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

~~~简而言之，em %作为字体单位有更大的灵活性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默默唐测试</title>
<style type="text/css" >
body{
font-size:63%;
}
</style>
</head>
<body>
<p style="font-size:1.2em;">font-size:1.2em 默默唐 (可以调整)</p>
<p style="font-size:12px;">font-size:12px 默默唐 (不能调整)</p>
<p style="font-size:1.2em; color:#F90;">你可以通过IE顶部菜单中的“查看-文字大小“来调整字体显示尺寸</p>
</body>
</html>

随机推荐

第七届河南省赛10403: D.山区修路（dp）
10403: D.山区修路 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 69 Solved: 23 [Submit][Status][Web Bo ...
sae上屏蔽错误显示并查看错误日志
首先应用上线之前肯定要屏蔽错误显示的, 登录sae,点进去你的应用, 关闭之后进入日志管理当前的当前版本在http中可以查看各个级别的日志记录了
Android MediaPlayer Error -1004
之前用Android自带的VideoView播放在线视频一直没问题的.今天突然碰到无法播放. MediaPalyer返回的错误代码是-1004,API文档上写的是:Bitstream is not c ...
#308 (div.2) A. Vanya and Table
1.题目描写叙述:点击打开链接 2.解题思路:本题是一道简单的模拟题.每次扫描一个输入的长方形,然后将内部全部点都+1,终于统计数组全部元素的和就可以. 3.代码: #define _CRT_SECU ...
paip. everything exe 文件不能启动的解决
paip. everything exe 文件不能启动的解决作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏地址:http://blo ...
java 动态获取web应用的部署路径
public static String DEPLOY_PATH = null; static { String CurrentClassFilePath = Constant.class.getRe ...
findbugs的ant脚本实践
<?xml version="1.0" encoding="UTF-8"?> <project name="codeCheck&qu ...
SQL Server索引进阶：第十级，索引内部结构
原文地址: Stairway to SQL Server Indexes: Level 10,Index Internal Structure 本文是SQL Server索引进阶系列(Stairway ...
U3d 手游优化概述
移动平台瓶颈体积小芯片要求改功耗小影响计算系能带宽小传输方面受限性能优化资源方面美术方面自带地形(地形是非常占用资源的) a.控制地形的分辨率 b.地形高度图尺寸小于257 c.地 ...
struts2入门
好久没有动博客了.今天看了一下慕课网的视频,简单了解一下struts2. 首先是在项目中引入struts2的文件,有一个比较简单的方法就是可以直接右键项目MyEclipse->Project f ...

推荐font-size的单位 % em单位

推荐font-size的单位 % em单位的更多相关文章

随机推荐

热门专题