响应CSS：em的大小调整小于<0.5em [英] Responsive CSS: em&#39;s wont resize lower than &lt;0.5em

问题描述

我编码我的第一个响应布局使用CSS @media查询。我已将< meta name =viewportcontent =width = device-width> 添加到我的html中，因此我有一系列严格的设备宽度基于字体的字体大小布局。而且，我使用 em （希望）给予最一致的浏览器调整大小 html，body {width / height：100％;在我最小的情况下，我想把< h2>

/ code>标签在 em 0.5em。但是，一旦我低于这个金额，它不再调整大小。我可以看到的唯一选项是切换回像素和使用一些小的10px的量。

也许我可以考虑一个不同的方式？或者，我可能在 em 的规格中缺少一些东西。

解决方案

浏览器都有一个基本的字体大小。一般来说，这应该在14px和18px之间。如果你没有指定body font-size，那么1em将等于默认的font-size。你的例子适用于我，但是，0.5em = 14-18px => 7-9px的50％。

参考： http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly -mistake /

你可以指定更大的主体字体大小（例如24px），在这种情况下，0.5em将等于12px，但仍然可以。

注意：设置

时要小心

  html，body {
 font-size：1em; 
} 
  

对于我（在Google Chrome中），这产生了一个不同-size than

  body {
 font-size：1em; 
} 
  

I am coding my first responsive layout using CSS @media queries. I've added the <meta name="viewport" content="width=device-width"> to my html so I have a strict series of device-width based font-size layouts. And, I'm using em's to (hopefully) give the most consistant browser resizing with html, body {width/height:100%; font-size: 1em}.

In my smallest case, I want to put the <h2> tag at a relatively small em in the range of < 0.5em. However, once I go below that amount it no longer resizes. The only option I can see is to switch back to pixels and to use some small 10px amount.

Maybe I could think about this a different way? Or maybe I am missing something in the specs for em. Any advice is appreciated.

解决方案

Browsers all have a base font-size. Generally, that should be between 14px and 18px. If you don't specify a body font-size, 1em will equal the default font-size. Your example works for me, however, 0.5em = 50% of 14-18px => 7-9px. That is way too small to be properly readable.

Reference:http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

You can specify a bigger body font size (e.g, 24px), and in that case 0.5em will equal 12px, which is small, but still okay.

Additional note: be careful with setting

html, body {
font-size: 1em;
}

For me (in Google Chrome), this produced a different (smaller) font-size than

body {
font-size: 1em;
}

这篇关于响应CSS：em的大小调整小于<0.5em的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！