- 浏览: 951195 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
sscsacdsadcsd:
mike8625 写道react还要自己的一些标签 还得编译 ...
对于React体系的一点想法 -
mike8625:
说的都是给大公司听的,国内很多还是小公司,做个小项目, 说实话 ...
关于国内前端和JS技术发展的乱想 -
mike8625:
react还要自己的一些标签 还得编译 编译吧浏览器端说还慢 ...
对于React体系的一点想法 -
u012814086:
下意识想到了Golang
JavaScript语句后应该加分号么? -
xueduanyang:
我是水羊,年轻的时候觉得只要有好斧子就能做成好产品,各种产品都 ...
关于国内前端和JS技术发展的乱想
px,对于许多网页设计者来说,是最常用的CSS长度单位。然而,1px到底多长,恐怕没有多少人回答得上来。
CSS长度本身有绝对长度和相对长度的区分。
cm、pt之类的都是绝对长度,它们是物理长度——1cm是1/100米,而1米则大约是光在1秒钟内跑过距离的3亿分之一。(至于光速和1秒的精确值到底是多少,请查阅维基百科光速条目和秒条目。)1pt则是1/72英寸,而1英寸换算到公制是2.54cm。
而em、ex,以及百分比,则是相对长度。比如em相对于当前字体大小,百分比则根据属性定义不同有不同涵义,例如margin的值如果是百分比,表示是相对于父元素的width。
然而,px是什么?
一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。
不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点,也可以认为是打印机的物理像素,300DPI就是0.085mm,600DPI就是0.042mm。
注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率。这个viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。
一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。
所以CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。
怎样确保这一点呢?直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。
眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。
因此CSS规范使用视角来定义“参考像素”,1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) )
我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电,那就差不多是3米远。看电影的话……我就不知道多远了,您自己量吧。
因此,1参考像素:
对于电脑显示器是0.26mm(即1/96英寸);
对于激光打印机是0.20mm(假设阅读距离通常为55cm,即21英寸);
而换算时,对于300DPI的打印机(即每个点是1/300英寸),1px通常会四舍五入到3dots,也就是0.25mm左右;而对于600DPI的打印机,则可能四舍五入到5dots,也就是0.21mm。
上图中,左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。
综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。
然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终看到这个网页的用户的显示器上的1个点距”!反倒是那些绝对单位,其实一点也不绝对。
因为绝对单位比如cm或者pt,显示在屏幕上时最后还是要换算为像素,而且这种换算不是按照像素的实际物理长度来换算的(浏览器不用知道,也不可能知道当前这台显示器的1px物理长度到底是多少),而是按照桌面设定的DPI计算的。也就是说,网页设计者指定某个字体是12pt(即1/6英寸或4.2mm),实际上你量量屏幕,几乎不可能是正好12pt,而只是接近12pt的16px(按照96DPI换算)而已。如果你的屏幕点距是0.29mm,则实际上是4.64mm或13.15pt。假如你把桌面改为大字体(120DPI),则最终12pt相当于20px,按照0.29mm点距,最终效果是16.44pt。
过去,建议网页设计者不要使用px,一个原因就是基于用户可以根据自己的需要调节桌面DPI,从而控制绝对长度的实际长度(绕口令啊)。
然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节,没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样,以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px,而是可能对应1.2px或1.5px或其他值。
过去浏览器的调节字体大小的选项只对绝对长度有效(相当于调节浏览器内部的DPI),对px无效,这只能说是过去浏览器的设计问题,并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox,用户还可以选择是单单缩放字体,还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的,也是我认为合理的设计方式。毕竟,CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局,是否能适应不同的分辨率,那是另一个话题,与是否使用px作为单位并没有直接关联。
浏览器环境,用javascript。
过去不提倡用px?我一直都用px,12px,没遇到过什么问题。hax真勤奋啊,凌晨发文章。
据我观察,凌晨是hax最活跃的时候,只有那阵子GTalk显示为在线状态^_^
有点小纰漏:光速一秒是30w公里,应该是30*1000=3万万分之一。
CSS长度本身有绝对长度和相对长度的区分。
cm、pt之类的都是绝对长度,它们是物理长度——1cm是1/100米,而1米则大约是光在1秒钟内跑过距离的3亿分之一。(至于光速和1秒的精确值到底是多少,请查阅维基百科光速条目和秒条目。)1pt则是1/72英寸,而1英寸换算到公制是2.54cm。
而em、ex,以及百分比,则是相对长度。比如em相对于当前字体大小,百分比则根据属性定义不同有不同涵义,例如margin的值如果是百分比,表示是相对于父元素的width。
然而,px是什么?
一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。
不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点,也可以认为是打印机的物理像素,300DPI就是0.085mm,600DPI就是0.042mm。
注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率。这个viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。
一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。
所以CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。
怎样确保这一点呢?直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。
眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。
因此CSS规范使用视角来定义“参考像素”,1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。
请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) )
我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电,那就差不多是3米远。看电影的话……我就不知道多远了,您自己量吧。
因此,1参考像素:
对于电脑显示器是0.26mm(即1/96英寸);
对于激光打印机是0.20mm(假设阅读距离通常为55cm,即21英寸);
而换算时,对于300DPI的打印机(即每个点是1/300英寸),1px通常会四舍五入到3dots,也就是0.25mm左右;而对于600DPI的打印机,则可能四舍五入到5dots,也就是0.21mm。
上图中,左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。
综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。
然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终看到这个网页的用户的显示器上的1个点距”!反倒是那些绝对单位,其实一点也不绝对。
因为绝对单位比如cm或者pt,显示在屏幕上时最后还是要换算为像素,而且这种换算不是按照像素的实际物理长度来换算的(浏览器不用知道,也不可能知道当前这台显示器的1px物理长度到底是多少),而是按照桌面设定的DPI计算的。也就是说,网页设计者指定某个字体是12pt(即1/6英寸或4.2mm),实际上你量量屏幕,几乎不可能是正好12pt,而只是接近12pt的16px(按照96DPI换算)而已。如果你的屏幕点距是0.29mm,则实际上是4.64mm或13.15pt。假如你把桌面改为大字体(120DPI),则最终12pt相当于20px,按照0.29mm点距,最终效果是16.44pt。
过去,建议网页设计者不要使用px,一个原因就是基于用户可以根据自己的需要调节桌面DPI,从而控制绝对长度的实际长度(绕口令啊)。
然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节,没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样,以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px,而是可能对应1.2px或1.5px或其他值。
过去浏览器的调节字体大小的选项只对绝对长度有效(相当于调节浏览器内部的DPI),对px无效,这只能说是过去浏览器的设计问题,并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox,用户还可以选择是单单缩放字体,还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的,也是我认为合理的设计方式。毕竟,CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局,是否能适应不同的分辨率,那是另一个话题,与是否使用px作为单位并没有直接关联。
评论
13 楼
wenjixiao
2010-11-11
wenjixiao 写道
由于dpi可能有所不同,如何取得当前的dpi值呢?
浏览器环境,用javascript。
12 楼
wenjixiao
2010-11-11
由于dpi可能有所不同,如何取得当前的dpi值呢?
11 楼
hax
2009-09-24
em是大写X高度这个我倒没听说过。我只知道ex是小写x高度,并且x-height是字体排版中的非常重要的概念。
针对屏幕的浏览器中,网页样式计算出来的最后结果(computed value或used value),都是以px为单位,而且是允许小数的。“半像素平滑”带来的区别,可以认为是在actual value上,原本必须取整,即渲染引擎只支持整数,现在渲染引擎支持了小数——虽然屏幕上的物理像素总是离散的。
你后面说的意思我反复考虑了2个小时,觉得值得深入探讨。你提出的将em用来标示“缩放友好”(实际我觉得是“文字缩放友好,text zoom friendly”,具体我们再讨论)这个问题,不仅涉及页面的设计,也涉及浏览器的设计。它还暗示了引入css新长度单位rem的必要性。有机会和你当面聊,然后再做总结。
针对屏幕的浏览器中,网页样式计算出来的最后结果(computed value或used value),都是以px为单位,而且是允许小数的。“半像素平滑”带来的区别,可以认为是在actual value上,原本必须取整,即渲染引擎只支持整数,现在渲染引擎支持了小数——虽然屏幕上的物理像素总是离散的。
你后面说的意思我反复考虑了2个小时,觉得值得深入探讨。你提出的将em用来标示“缩放友好”(实际我觉得是“文字缩放友好,text zoom friendly”,具体我们再讨论)这个问题,不仅涉及页面的设计,也涉及浏览器的设计。它还暗示了引入css新长度单位rem的必要性。有机会和你当面聊,然后再做总结。
10 楼
Tin
2009-09-24
Hi hax,
上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。'em'是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。
你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。
在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。
但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯
比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。
从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。
上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。'em'是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。
你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。
在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。
但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯
比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。
从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。
9 楼
energykey
2009-05-04
有深度
8 楼
jkfzero
2009-04-29
考究派
7 楼
Army
2009-04-27
………………
6 楼
yukaizhao
2009-04-27
从来没有这么细致的了解这个问题
5 楼
weskycn
2009-04-27
px 是个相对单位早就听说过,不过一直百思不得其解,呵呵
4 楼
hax
2009-04-27
诶,凌晨果然脑子不清楚了,光速都给搞错了。。。
3 楼
jindw
2009-04-27
felixding 写道
过去不提倡用px?我一直都用px,12px,没遇到过什么问题。hax真勤奋啊,凌晨发文章。
据我观察,凌晨是hax最活跃的时候,只有那阵子GTalk显示为在线状态^_^
2 楼
pufan
2009-04-26
引用
而1米则大约是光在1秒钟内跑过距离的30万分之一
有点小纰漏:光速一秒是30w公里,应该是30*1000=3万万分之一。
1 楼
felixding
2009-04-25
过去不提倡用px?我一直都用px,12px,没遇到过什么问题。
hax真勤奋啊,凌晨发文章。
hax真勤奋啊,凌晨发文章。
发表评论
-
ms is wrong AGAIN
2013-12-06 21:08 2839微软的Web工程师写了这篇文章Vendor Prefixes ... -
为后代选择器和ID选择器而辩护
2013-04-20 06:57 6902【本文译自 Zeldman (作为前端工程师,不要告诉我你不知 ... -
My Opinion about so-called "CSS Framework"
2012-10-27 12:54 2368There are many so-called " ... -
document.enableStyleSheetsForSet() 的兼容
2011-06-17 16:27 3450可能有不少同学已经了 ... -
再论“像素(px)”
2011-03-13 14:37 0两年之前我写了一篇文 ... -
再谈某些所谓CSS最佳实践
2010-12-23 01:59 10019最近看了国内某位前端工程师今年出版的新书,其中讨论CSS的部分 ... -
webkit上multicolumn的bug和解决技巧一则
2010-12-04 12:03 3989webkit开始支持多栏属性 ... -
关于lang()语言伪类选择器的提案
2010-10-26 00:36 0本文发端“中文HTML5同 ... -
关于样式类(Style Class)
2009-10-22 11:37 9873我们知道HTML和CSS是正交 ... -
Meta CSS —— 一个Anti Pattern的典型
2009-10-21 02:15 11616关于Meta CSS框架,可以 ... -
有关IE的CSS的几个偶得
2008-08-25 19:13 2155除了个别几个CSS属性,IE(包括IE7)并不支持一般性的in ... -
版本、兼容性以及标准 续(翻译)
2008-02-10 19:40 4665续前半部分。 Commitment ... -
版本、兼容性以及标准(翻译)
2008-02-10 06:03 4703本文译自Maciej Stachowiak在webkit团队b ... -
Web未来的分歧
2008-02-09 05:41 2243Dean Edwards的新的一篇blog是几段引用,抄录并勉 ... -
IE神经刀
2008-02-01 15:13 4854我想,你可能已经知道长期以来使用自定义标签的困难是什么。 对, ... -
《精通CSS》读书笔记(七)
2007-09-05 02:37 5544续上篇 在第5章的最后,作者对dl做了简短的说明,作者不是很 ... -
IE中IMG元素上应用padding的奇特bug
2007-09-02 23:43 5975最近又(又说了“又”)发现了一个IE的奇特bug。 我们知道 ... -
关于list(ol和ul)的padding和margin
2007-09-02 19:08 9397在《CSS Mastery》一书的第5章中,作者说IE和Ope ... -
《精通CSS》读书笔记(六)
2007-08-29 20:22 6271续上篇。 第5章 关于列表,首先,由于list-style ... -
《精通CSS》读书笔记(五)
2007-08-28 16:06 5615续上篇。 第4章 本章 ...
相关推荐
CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素。 物理像素(physical...
此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置,仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; ...
的插件,从像素单位生成视口单位(vw,vh,vmin,vmax)。 演示版 如果您的项目涉及固定宽度,则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; ...
像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自C
这个程序是我在做网页时为了测量元素的尺寸而做的,用VB6写的一个简单的应用,测量两点间的像素距离。 点击[开始]后,鼠标按住为第一个点,放开为第二个点,并显示结果。 [结果]框内,第一个文本框是第一个点的...
相对于指定的上下文,以像素为单位测量CSS3单位的数量(如果有)。 基于 句法 $().px(); $.px(); 参数 上下文(可选) 要测量的 DOM 树节点。 一些单位如 'em' 和 '%' 是相对于当前字体大小的。 如果未指定,'...
概要创建此文件的原因很简单,有两个原因: 大多数调整是在根基线之外完成的(始终是rem ),我们都知道28px大致是什么样子。 没有1.75rem 。 这就是我们测量屏幕上物体的方式。 通常,我只是以像素为单位确定我需要...
以为像素为单位缩放图片,适合用于背景图片跟着 窗体大小动态改变图片尺寸
px是像素图像的基本采样单位,相对于显示器屏幕分辨率而已的,什么是一个像素呢,你把一张图一直放大,会看到一个个小的方格子,一个方格子就是一个像素。浏览器默认的字体大小是16px。 px的特点是:字体大小写死...
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”...
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和...像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点...像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手
px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。 2、em 参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。 字体大小同样都是1.5em,但是效果却截然...
最近在写移动端 H5 应用,遇到一个值得记录下来的点。现在从它的由来到实现,我们来聊一下移动端 1px,说 1px 不够准确,应该说...像素 :指在由一个数字序列表示的图像中的一个最小单元,单位是 px,不可再次分割了。
小程序的屏幕宽固定为750rpx,即750个物理像素,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px)。 例如iphone6的screenWidth=375px,则在iphone6中1rpx=0.5px 在不同设备上rpx与px...
小结:pt与px的关系是,一个单位的pt里包含几个px,包含的px越多,则越清晰。但因为人视网膜的关系,最多只能识别单位pt里2个像素点,大于2个像素点,人眼识别不出,所以6plus看上去不会比6更清晰。
Vim-px-to-em - 将 px 转换为 em 或 em 转换为 px 使您的 CSS 样式表的字体大小单位转换变得容易!安装病原体安装导航到本地 Vim 设置中的[VIM_ROOT]/bundle目录git 克隆用法要将像素转换为 em,请在可视模式下选择...
在VC / eVC / VS中画的对话框、按钮等控件时,在VS右下角显示的 XX * XX单位是DLU (Dialog Unit), 这是根据你设置的对话框字体大小而改变的。如果把字体改大了,那么DIALOG和BUTTON自然也被“撑”大了,比较灵活。...
先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。
px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的...