我听说你应该使用em而不是像素来定义样式表中的大小和距离.所以问题是为什么在css中定义样式时我应该使用em而不是px？有一个很好的例子可以说明这一点吗？
说一个是比另一个更好的选择是错误的(或两者都不会在规范中给出自己的目的).甚至值得注意的是StackOverflow广泛使用px单元.Spoike被告知这不是一个糟糕的选择.
单位的定义
PX是测量的绝对单位(如在,PT,或厘米),其也恰好是一个1/96 在单元(更为什么更高版本).因为它是绝对测量,所以可以在任何时候使用它来定义特定大小的东西,而不是与浏览器窗口的大小或字体大小等其他东西成比例.
与所有其他绝对单位一样,px单位不会根据浏览器窗口的宽度进行缩放.因此,如果整个页面设计使用绝对单位(如px而不是%),则它将无法适应浏览器的宽度.这本身并不是好的或坏的,只是设计师在坚持精确尺寸和不灵活与拉伸之间需要做出的选择,但在此过程中不遵守确切的尺寸.对于站点来说,通常会混合使用固定大小和灵活大小的对象.
固定大小的元素通常需要合并到页面中 - 例如广告横幅,徽标或图标.这可确保您在设计中几乎总是需要至少一些基于px的测量.例如,图像将(默认情况下)缩放,使得每个像素的大小为1*px*,因此如果您围绕图像进行设计,则需要px单位.它对于精确的字体大小调整和边框宽度也非常有用,由于四舍五入,因此对大多数屏幕使用px单位最有意义.
所有绝对测量值都是严格相关的; 也就是说,1英寸是永远 96PX,就像1英寸是永远 72pt.(请注意,在谈论基于屏幕的媒体时,1in几乎从不实际上是物理英寸).所有绝对测量假设标称屏幕分辨率为96ppi,桌面监视器的标称观看距离,在这样的屏幕上,一个px将等于屏幕上的一个物理像素,一个在将等于96个物理像素.在像素密度或观看距离上显着不同的屏幕上,或者如果用户使用浏览器的缩放功能缩放了页面,则px将不再与物理像素相关.
em不是绝对单位 - 它是相对于当前选择的字体大小的单位.除非您通过使用绝对单位(例如px或pt)设置字体大小来覆盖字体样式,否则这将受到用户浏览器或操作系统中字体选择的影响(如果它们已经制作了字体样式),因此它没有意义使用em作为长度的一般单位,除非您特别希望它按字体大小比例缩放.
当您特别希望某些内容的大小取决于当前字体大小时,请使用em.
%也是相对单位,在这种情况下,相对于父元素的高度或宽度.如果你的设计不依赖于特定的像素大小来设置它的大小,它们是px单元的一个很好的替代品,例如设计的总宽度.
在设计中使用%单位可以使您的设计适应屏幕/设备的宽度,而使用绝对单位(如px)则不然.
我有一台高分辨率的小型笔记本电脑,必须以120%的文本缩放率运行Firefox,才能在不眯眼的情况下阅读.
许多网站都存在此问题.布局变得全乱,按钮中的文本被切成两半或完全消失.甚至stackoverflow.com也会受到影响:
请注意顶部按钮和页面选项卡如何重叠.如果他们使用em单位而不是px,那就没有问题了.
我之所以问这个问题的原因是我忘记了如何使用em,因为有一段时间我在CSS中很开心.人们没有注意到我保持这个问题的一般性,因为我不是在谈论调整字体本身.我对如何在页面上的任何给定块元素上定义样式更感兴趣.
正如Henrik Paul和其他人指出的那样,em与元素中使用的字体大小成正比.在px中定义块元素的大小是常见的做法,但是,在浏览器中调整字体大小通常会破坏这种设计.通常使用快捷键Ctrl+ +或Ctrl+ 来调整字体大小-.所以一个好的做法是改用em.
这是一个说明性的例子.假设我们有一个div标签,我们想要变成一个时尚的日期框,我们可能有这样的HTML代码:
July
4
一个简单的实现将date-box在px中定义类的宽度:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}
但是,如果我们想在浏览器中调整文本大小,设计就会中断.文本也会在框外流血,这与SO的设计几乎相同,就像flodin指出的那样.这是因为盒子的宽度与锁定时的宽度相同50px.
更智能的方法是在ems中定义宽度:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt
这样你就可以在日期框上设置一个流畅的设计,即盒子的大小与文本的大小一致,与日期框定义的字体大小成比例.在此示例中,font-size定义*为10pt,大小为该字体大小的2.5倍.因此,当您在浏览器中调整字体大小时,该框的大小将是该字体大小的2.5倍.
顶部投票答案在这里从thomasrutter是正确的,他对响应EM.但是像素的大小是非常错误的.所以即使它已经老了,我也不能让它变得不成熟.
电脑屏幕通常不是96dpi!(或者ppi,如果你想变得迂腐.)
像素没有固定的物理尺寸.
(是的,它仅在一个屏幕内固定,但在下一个屏幕中,像素很可能更大或更小,当然不是1/96英寸.)
证明
画一条线,长960像素.用物理标尺测量它.是10英寸？没有..？
将笔记本电脑连接到电视.线路现在是10英寸？还没有？
在iPhone上显示该行.还是一样大小？为什么不？
谁发明了96dpi电脑屏幕神话？
(有些宗教以72dpi神话运作.但同样错误.)
它适用于必须根据字体大小进行缩放的所有内容.
它在通过缩放字体大小实现缩放的浏览器上特别有用.因此,如果您使用相应的em比例缩放所有元素的大小.
因为em(http://en.wikipedia.org/wiki/Em_ ( typography))与当前使用的字体大小成正比.如果字体大小是16分,则一个em是16分.如果您的字体大小为16像素(注意:与点不同),则一个em为16像素.
这导致了两个(相关的)事情:
如果您选择稍后在CSS中编辑字体大小,则可以轻松保持比例.
许多浏览器都支持自定义字体大小,覆盖CSS.如果以像素为单位设计所有内容,则在这些情况下布局可能会中断.但是,如果您使用ems,这些覆盖应该可以缓解这些问题.
例:
代码:body {font-size:10px;} //将所有大小保持在10以下,更改此值,其余更改为例如此值的1.4
1 {font-size:1.2em;} // 12px 2 {font-size:1.4em;} // 14px 3 {font-size:1.6em;} // 16px 4 {font-size:1.8em;} // 18px 5 {font-size:2em;} // 20px...
身体
1
2
3
4
五
通过改变身体中的值,其余的自动变化是基础值的一种...
10×2 = 20 10×1.6 = 16等
您可以将基值设置为8px ...所以8×2 = 16 8×1.6 = 12.8 //可以通过浏览器舍入
一个非常实际的原因是IE 6不允许您使用px指定字体大小,而如果您使用相对单位(如em或百分比)则会这样做.不允许用户调整字体大小对于可访问性非常不利.虽然它在下降,但仍然有很多IE 6用户在那里.
使用px精确放置图形元素.使用em进行测量,必须在文本元素周围进行定位和间距,如行高等.px是像素精确的,em可以随着使用的字体动态变化
京公网安备 11010802040832号 | 京ICP备19059560号-6 