与EM值增长率不一致

多年来，我认为我足够了解css中不同类型值之间的差异，我可以使样式表具有一定的置信度。那么，至少直到今天。与EM值增长率不一致

在为我的网站上的标题选择正确的字体大小时，我发现在增加em值时字体大小的增长速度有些奇怪。

模拟较小的屏幕时，在某些情况下，将em从1.0改为1.4几乎不会增加实际字体大小，但随后从1.4改变为1.5会使其增大2倍。这是为什么？

我使用这个网站：

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="z2.css" /> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
       <h1>Some text</h1> 
       <p>Some longer text, with many lines, very long. Like, thesis long. 
REEEALLLYY LONG TEXT. Long. Not hyperbolizing. Just loooooong teeeext. A big blob of long text. I just realized I could have just pasted Lorem Ipsum sonet here. Whatever...</p> 
    </body> 
</html>

这个CSS：

h1 { 
    font-size: 2.7em; 
} 

p { 
    font-size: 1.0em; 
    float:right; 
}

这就是输出看上去仿效屏，395像素宽度时，如：

现在，将<p>的font-size从1.0〜1.1做到这一点：

，然后将其更改为2.2做到这一点（近无）：

我的话非常困惑。我意识到这可能只是因为字体缩放。但是，当我：

改变文本的内部<p>长度（增加只是多了一个字母的话）
集<p>的浮子没有

的字体上1.0的实际大小他们走了。为什么？

顺便说一句。我为此使用了Chrome DevTools。

来源

2016-04-13 Błażej Michalik

也许一些浏览器插件已安装喜欢时尚，改变你的风格？在小提琴看来我完全没问题：https：//jsfiddle.net/8fc65thy/我可以随意删除浮动属性并更改字体大小，它看起来是一致的。 – Paul

@保罗：我在隐身标签中复制它 - 没有任何改变。 js小提琴的东西是它不会像开发工具的模拟器那样使用屏幕分辨率来缩放字体。您需要模拟屏幕宽度来观察这一点，而不仅仅是缩小文本所在的容器。我现在对我的屏幕实在没什么太大的需求，但是由于我很可能想在不久的将来使用RaspberryPi这样的解决方案......好吧，让我们说它让我感觉错了。 –

您需要在文档的head中添加viewport meta。

添加这样的事情：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

现在你会发现，移动显示尺寸呈现您font-size正确的和不断变化的大小将是有意义的一次。

这可以帮助你更好地了解正在发生的事情在你现在的情况： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

来源

2016-04-13 12:43:23 EoghanTadhg

与EM值增长率不一致

回答

相关问题