浏览器的默认字体高都是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代码的调整,你会发现自己的网站又向用户体验设计更靠近了一步,在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。
<!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>
分享到:
相关推荐
其实这一切都可以避免,那就是使用em单位作为字体显示单位。 浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em,也就是12px=0.75em, 10px=0.625em,通过1px=0....
定义和用法font-size 属性可设置字体的尺寸。说明该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;...关于em值的使用问题用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就
响应字体大小一个 SASS mixin,可以轻松创建基于屏幕宽度...}或者(如果你想直截了当地说): p { @include responsive-font-size ( $min-font-size: 1.8em, $max-font-size: 3.7em, $min-screen-width: 640px, $max-s
px(pixel)像素 相信大家对像素这个名词并不陌生,接下来来介绍下这个单位的一些小知识点: ...也可以理解为是一个百分比单位, 1em=100%.那么来介绍下在css样式中em呈现的是什么样的效果吧: 如果当前子
font-size (绝对大小/相对大小/长度值/百分比) font ([ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'>) 字体属性 文本属性 line-height (2em/...
这主要是为了方便em与px相互转换,em的初始值为1em=16px,显然这样的话,如1.2em则=19.2px,可是我们在设置的时候很少看见19.2px这样表示的大小,也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size...
2.font-size 字体大小 谷歌浏览器默认 16px 不同浏览器默认值不同 所以一般需要指定字体大小 避免浏览器之间的差异 标题标签比较特殊 需要单独指定大小 通常给body设置 3.font-weight 字体粗细 normal正常/...
像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置,仅定位与字体相关的...
1、内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位....3、当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下: $(wind
1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , ...
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...
相对于父元素的字体大小(line-height中设置em是继承当前元素的font-size的倍数) rem font size of the root element(相对于根元素html的大小的单位) ie9 和 ie10下面字体大小不支持rem,其他的支持 ex font-...
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位...
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以, 单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位...
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算...
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:...
A Mobile-first type scale 将任何元素设置为任何断点所需的字体大小。 基类名称跨三个断点命名: -ns = 不小(涵盖所有比手机大的东西) -m = 中等 -l = 大 安装 npm install type.css --save-dev 或在 github ...
Vim-px-to-em - 将 px 转换为 em 或 em 转换为 px 使您的 CSS ... 如果您不想使用 16px 的标准 Base 字体,请将以下内容添加到您的 ~/.vimrc let g:px_to_em_base = DIFFERENT_FONT_SIZE例子: let g:px_to_em_base =