Metro-UI-CSS学习——em

    Metro-UI-CSS的排版,我们可以看到,它使用了em,而不是常用的px,它们到底有什么区别?

    px是定义CSS元素尺寸大小的单位,是相对于屏幕分辨率而言,即相对长度;

    em,据说国外的网站经常被使用,指的是字体的垂直高度,一般浏览器默认的字体是16px,即1em。

    按照这个说法,如果网页字体指定了px的大小,比如16px,不能使用浏览器的文字大小对字体就行放大缩小。为了更好的说明这个问题,贴个代码,copy到一个html文件里面,用浏览器访问就可以看到效果。

<!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>em和px的区别</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>

 

      

你可能感兴趣的:(css em)