我发现下面的JS解决方案,基于视窗的大小相当考究其字体大小:
https://stackoverflow.com/a/10295733/1318135
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
不过,也有2个问题:
它依赖于视口被调整。 我想触发它时首先加载的页面为好,但我在JS对于新手。
我的页面完全编码使用em值; 这款采用像素。 我怎么可以用它来调整只有默认的EM大小 ,然后它会自动涓滴到页面上的所有其他元素?
http://jsfiddle.net/hFNc7/
谢谢!
见对方的回答(或把http://jsfiddle.net/cjzEK/1/在你的页面的底部)
EM是不是对自己的尺寸。 这是写不同的百分比。 EM为你工作的唯一办法就是因为是在浏览器设置(或者也有可能复位样式表)1基本字体大小。 在浏览器中的字体的通常基本大小是16像素。 那么,这种解决方案的作用是将它添加到身体(它添加到HTML可能会更好)更改基本尺寸。
例如p{font-size:1em;}
而不做将是16px的任何复位。 1.5em将是24px的。
您需要运行的代码body
的load
事件。 这样做的最简单方法是directy设置它通过它onload
属性:
<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">
它能做什么:
- 创建一个功能,那就是能够动态地设置字体大小。
- 设置功能
resize
事件侦听器。 - 立即执行功能。
PS:有写这个更优雅的方式,但由于新的,它可能是更好的开始与一个更简单的符号。
文章来源: Tweaking performance of elegant solution to text resize for fluid/responsive designs?