手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >用户体验第一 font-size放弃px选择em
用户体验第一 font-size放弃px选择em
摘要:在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况...

在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免,那就是使用em单位作为字体显示单位。

浏览器的默认字体高都是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代码的调整,你会发现自己的网站又向用户体验设计更靠近了一步,在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

查字典教程网 www.jb51.net body{ font-size:63%; }

font-size:1.2em 阿里满满 Alimanman (可以调整)

font-size:12px 阿里满满 Alimanman (不能调整)

你可以通过IE顶部菜单中的"察看-文字大小"来调整字体显示尺寸

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

【用户体验第一 font-size放弃px选择em】相关文章:

div中内容上下居中小结教程

三种CSS图表代码

input输入框中有图片怎么使用css布局实现

CSS UL LI布局实现表格效果

css技巧之PDF、ZIP、DOC链接的标注

用ul、li标签创建css横向导航菜单示例

用CSS设计高用户体验的web文字大小

有关首行首字下沉的实现原理及代码

ie6,7下空DIV无任何内容时占据空间问题解决

CSS教程:建议font-size使用em

精品推荐
分类导航