css 移动端设计图尺寸 Ems到像素转换-为什么62.5%而不是6.25%?




移动端设计图尺寸 (8)

我知道我们很多人都熟悉将CSS中body元素的字体大小设置为62.5%。 这意味着1em将等于10px,并有助于保持像素完美的东西,但也允许缩放字体。

那么不是说把它设置为6.25%就等于1em = 1px? 看起来像一个更简单的转换,而不是乱七八糟的...

多谢你们! 我很了解他们,这是历史(设计学位),但我相信别人可能会发现它有帮助:)

至于1em = 1px,我不明白这是不是所希望的。 em是方形的,无论你的单位是什么(不管是点还是像素),没有人会将它们的类型设置为1px(就像没有人会在1pt中设置打印类型一样)。 此外,甚至你的文章也承认,在大多数数字字体中,首字母“M”通常小于1em,而em仅仅是字体大小的反映(48pt类型会为他们提供48pt乘以48pt的正方形,12pt类型会产生12x12等)

此外,人们会这样做的原因更多的是设置页面上的其他元素的尺寸,以便在用户调整字体大小时可以很好地缩放。 当然,总是会有少数人将默认设置为16像素以外的其他设置,但非常值得付出代价良好的像素完美布局。

https://code.i-harness.com


可以说,但是你却失去了对你的规模的控制。 不要忘记,标题通常将继承与他们的等级成比例的相同尺寸(即<h1>将是最大的, <h2>稍小)。 如果你想减少这些元素,你将需要使用很多小数位占位符的EM值。 想象一下<h4> font-size: 0.005em

或者更糟的是,如果你想让字体变大,你可能会看font-size: 40em或者是荒谬的东西。

简而言之,1em = 10px对于字体缩放值更实用。 尽管1:1的比例在纸上可能是有意义的,但它并不适合合理且可维护的CSS。


转换可能会更简单,但是这并不意味着它应该是什么意思。

如果给定字体中的大写“M”,1em应该等于宽度。 如果字母M的宽度是1像素,您的字体将是不可读的。

http://en.wikipedia.org/wiki/Em_(typography)


首先,不要假设1 em将等于10个像素。 em单位与正在使用的印刷术直接相关。 如果某人的字体大小为16像素,那么62.5%确实是10像素(16 * 0.625 = 10),但是当某人修改了他们的默认字体大小时,显然这会改变。

其次,这是我第一次听说过使用62.5%的基体font-size 。 我总是使用76%的font-size ,基于Owen Briggs的Sane CSS排版

最后,回答你的问题,是的,你可以使用6.25%的字体大小,然后使用12em而不是1.2em 。 但是,我会高度不鼓励这种方法。 在typograhy世界中,一个em的意思是大写字母“M”的宽度 。 这种方法完全违反了这个惯例,并且会严重混淆将来维护CSS的任何人。


根据浏览器,用户的设置,特别是最小字体大小的设置,整个“62.5%= 10px”的东西基本上都被打破了--62.5%可能是10px,也可能不是10px。 所以你不能只设计像素,然后在62.5%= 10px的假设下“转换”为ems,因为你的设计总是会打破。 如果你想要一个像素完美的设计,你必须使用像素作为单位。 如果你想要一个灵活的设计,你需要考虑网站的不同元素的适当的单位 - ems的元素,应该缩放相关的文本大小,元素的百分比应该缩放相对于窗口的大小,元素的像素(像图片),不应该缩放。

任何人在CSS中包含62.5%的字体大小根本上不知道如何为网页设计。


你也可能会觉得这很有用。 http://pixel2em.kleptomac.com这提供了一个在线像素到EM转换器,你也可以做一个完整的CSS文件转换。



伟大的问题。

我认为6.25%是适应性/响应性网页设计弹性模板的有趣命题。

特别是字体大小与rem单位的借给它自己的论点... 1:1的比例是更容易

rem :“root em”...根元素的字体大小。 http://www.w3.org/TR/css3-values/

请参阅以下示例: http : //snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在你的建议...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

...玩我的JSBin的例子: 测试CSS3“REM”单位弹性内容

1:1的比例应该会导致更少的拼写错误。

REM注意:通过正确的CSS重置和bodypx声明基本font-size ,并且rem会优雅地降级...如果支持rem ,并且在px之后声明,则会应用该值。 否则,浏览器将退回到px

确定支持(特别是在移动) rem 。 请使用任何/所有浏览器/设备打开此页面... http://ahedg.es/w/rem.html


我试图做同样的事情,但遇到了使用边缘和填充rems的问题。 设置font-size为62.5%可以避免这些问题。

例如,下面的CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

呈现为:

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

奇怪,对吧? 我假设这是由最小字体大小的一些奇怪的冲突造成的。

现在,如果你使用font-size: 62.5% ,事情就会像预期的那样呈现:

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

呈现为:

p {
  font-size: 1px;
  margin:    1px;
}




font-size