不同手机上的网站上的字体大小相同

问题描述：

我目前正在开发wordpress模板，并且我终于开始使其响应，但是手机上的字体大小不同。例如，我拥有带有Microsoft Edge的诺基亚Lumia，并且我的网页上的文字很大。不过，在采用Chrome的三星Galaxy S2上，文字很小。我怎样才能做到这一点，所有的手机都显示一个大文本？不同手机上的网站上的字体大小相同

如果需要的话，这里有一个链接：http://acevix.com/development/temp/index.php/2015/12/12/hello-world/

发布你的代码jsfiddle，所以我们可以看到发生了什么，我看你使用bootstrap，所以尝试指定你的字体大小im em -s，因为引导程序为所有平台上的元素设置基本字体:) –

我主要使用em，因为您可以在链接上看到我只在需要时才使用px。我没有设置默认大小（以像素为单位）。我需要这样做才能解决这个问题吗？如果是，如何？ – Radu

不，你不需要，引导程序做所有的工作，如果你包括它;） –

答

由于有广泛的显示尺寸和分辨率它主要是通过相对单位设置页面上的任何物体的大小的最佳方式，即em,vw或vh。

看到http://www.w3.org/TR/css3-values/#relative-lengths

绝对单位像px或in取决于一个装置的像素密度的。所以如果你有一个250ppi的显示器和另一个150ppi的显示器，在后一种情况下文本会更大。

看到http://www.w3.org/TR/css3-values/#absolute-lengths

我主要使用em，正如你可以在链接上看到的，当我真正需要它时，我只使用px。我没有设置默认大小（以像素为单位）。我需要这样做才能解决这个问题吗？如果是，如何？ – Radu

em设置相对于父字体大小的大小。所以如果你用绝对单位在父元素中定义字体大小，那么em也将取决于绝对值......或换句话说，它不取决于显示器大小。如果我没有错，则在body-tag中设置字体大小为14px。这可能是原因。 – treeno

@treeno如果你看到他的页面正在使用引导程序，并且引导程序为元素设置基本字体，那么只需要定义em中的单元:) –

答

您应该使用EM-S，由于您使用的引导，还有一件事，你的网站没有，因为我能看到的代码是

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

这是真正的响应式设计的重要标签尝试添加它:)

你能解释为什么元标签对响应式设计很重要吗？ – treeno

为什么我会:)你需要指示设备采用网站的宽度，并强烈建议把它，这里是更多关于它：http://webdesign.tutsplus.com/articles/quick-tip-dont -forget最视区元标记 - 网页设计-5972 –

不同手机上的网站上的字体大小相同

相关推荐