首先我们大致了解一下每个简称的含义,他们都是在设备中表示长度:
下面我们来详细了解一下他们的含义和联系:
1. 看到我们前端页面的css中,有些字体设置成10pt却不是10px我们会有疑惑,pt是什么呢?
pt(point)是印刷行业常用的单位,等于1/72英寸,就是打印分辨率,表示绝对长度。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
2. DPI和PPI之间的区别是什么呢?为什么有的手机厂家在屏幕参数一栏标注PPI,而有的手机却标注DPI?
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ font-size: 12px; } header{ width:100%; height: 4em; background-color:#ccc; font-size: 24px; text-align: center; } header div{ font-size:2em; } </style> </head> <body> <div id="container"> 这里是12px <header> 这里是24px <div>这里是48px</div> </header> </div> </body></html>
em是css3新增的一个相对单位,与em的区别在于,它是相对于html根元素的(在body标签里面设置字体大小不起作用)。还是上面那个例子,如果换做rem,结果如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ font-size: 24px; } body{ font-size: 1rem; } header{ width:100%; height: 48px; background-color:#ccc; font-size: 1rem; text-align: center; } header div{ font-size:1rem; } </style> </head> <body> <div id="container"> 这里是24px <header> 这里是24px <div>这里是48px</div> </header> </div> </body></html>
学习网址推荐:
联系客服