为什么 em font-size 不在响应式网格上调整大小？

Question

我创建了一个响应式网格并使用 em 作为字体大小来调整文本大小，但我不能完全理解 em 的工作原理，因为没有调整文本大小。

现场直播： http ://www.rubytuesdaycreative.co.uk/testsite/shop.html

在 Ethan Marcottes 的书之后，我将正文字体设置为 font-size:100% 然后由上面链接页面上的 cpation 中的文本制作为 2ems - 所以基本尺寸加倍……我做错了吗？它似乎根本没有改变。

http://jsfiddle.net/jm3sK/

原文由 Francesca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然这是一个老问题，但我最近想出了一个解决方案。

如果将正文中的所有文本定义为百分比，然后在 document.ready 和 window.resize 上调整正文中的文本大小，则文本保持 100% 响应。

例如

CSS
font-size: 100%;

JavaScript
function fontResize(){
    var perc = parseInt($(window).width())/125;
    $('body').css('font-size',perc);
}

JQuery
$(document).ready(function (){
    fontResize();
});

$(window).resize(function () {
    fontResize();
});

原文由 MCMXCII 发布，翻译遵循 CC BY-SA 3.0 许可协议