调整流体/响应式设计的文字大小优雅解决方案的性能？

我发现下面的JS解决方案，基于视窗的大小有字体大小相当考究：调整流体/响应式设计的文字大小优雅解决方案的性能？

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

不过，也有2个问题：

它依赖于视正在调整大小。我想在第一次加载页面的时候触发它，但是JS是一个新手。
我的页面完全使用em值进行编码;这使用px。我如何使用它来调整默认em尺寸只有，然后它会自动滴流到页面上的其他元素？

http://jsfiddle.net/hFNc7/

谢谢！

来源

2012-08-03 user1318135

见对方的回答（或把http://jsfiddle.net/cjzEK/1/你的页面的底部）
EM是不是对自己的尺寸。这是一个百分比写的不同。 em适用于你的唯一方法是因为在浏览器中设置了1个基本字体大小（或者也可能是重置样式表）。浏览器中通常的字体基本大小是16px。所以这个解决方案所做的是通过将它添加到主体来改变基本大小（将它添加到html中可能会更好）。

例如， p{font-size:1em;}没有做任何重置将是16px。 1.5em将是24px。

来源

2012-08-03 16:01:52

Gueze根据问题的代码，我尝试做类似'onresize = onload = function（）{document.getElementById（“post”）.style.fontSize = document。 getElementById（“icon”）。width +“px”};'where'post'是一个按钮的id，'icon'是一个div。我尝试将按钮字母的大小设置为div。不起作用。有什么建议吗？谢谢 – slevin 2013-11-12 03:13:23

宽度不是div的可用属性。尝试'docum ent.getElementById（“icon”）。clientWidth'来获取元素的实际渲染宽度，包括填充。您可以在MDN上阅读这些信息，等等。如果你需要更多的帮助，你应该开辟一个新的话题（搜索相关的话后） – 2013-11-12 08:21:41

Geuze Works很好，但由于某些原因，文本的大小是巨大的。无论如何，我会继续搜索。不管怎么说，还是要谢谢你 – slevin 2013-11-12 23:52:50

您需要在body的load事件中运行该代码。这样做的最简单方法是directy设置它通过其onload属性：

<body onload="var f = function() { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

做些什么：

创建一个功能，那就是能够动态地设置字体大小。
将函数设置为resize事件侦听器。
立即执行该功能。

PS：有更优雅的方式来写这个，但是既然你是新手，可能会更好一些，从一个更简单的符号开始。

来源

2012-08-03 15:59:54

我只是忘了提及，如果你愿意，你可以把'px'改成'em'。但我建议你绝对设置一个默认尺寸。否则你会依赖于用户的浏览器设置。 – 2012-08-03 16:01:41

这很有道理。我可能会使用这个解决方案，但我很好奇你提到的更优雅的东西是什么。 – user1318135 2012-08-03 16:15:54

更优雅的是不会将它写入html文件，而是写入单独的JavaScript文件中。 – 2012-08-03 16:33:40

调整流体/响应式设计的文字大小优雅解决方案的性能？

回答

相关问题