pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
pt 的效果是不随浏览器分辨率的变化而发生视觉的变化,永远看起来一样大。例如Google Docs,腾讯文档的存储都使用 pt 单位,如果根据 pt 转换获取对应的 px 单位
var util = { }; util.pointsToPixels = function (value) { return value * this.getPixelsPerPoint(); }; util.getPixelsPerPoint = function () { var $el = $("<span style='position: absolute; top: -100px; width: 1in; height: 1in'></span>'").appendTo($('body')); var dpi = $el[0].offsetHeight; this.pixeslPerPoint = dpi / 72; $el.remove(); return this.pixeslPerPoint; }; document.write(util.pointsToPixels(48) + 'px');
原理:
- 在网页中定义一个隐藏的元素,其长度和宽度为1英寸(Inches)
- 然后该隐藏元素在当前浏览器的实际高度(px), 除以每英寸包含的72像素的固定单位(这个通常和服务端的打印导出对齐),获取一个每个像素点对应的 pixels 长度(一个系数)
- 从而最终传入的 n(pt) * pixeslPerPoint 就是最后的像素值,