调整字体大小调整DIV
我有以下CSS设置：
.header_wrapper, .navbar_wrapper, .body_wrapper, .footer_wrapper {
display: table;
width: 768px;
margin-left: auto;
margin-right: auto;
}
如何在用户点击字体大小调整按钮时以增量（直到浏览器窗口的100％）调整这些元素以适应文本？ 我的字体大小默认是16px。 当用户在这个阶段增加字体时，元素需要调整大小（即在页面加载时）。 但是，当用户缩小到16px（以及其下的任何值）时，应该恢复默认大小。
这是我的JavaScript代码：
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
大小与字体大小的任何元素，使元素在尺寸em 。 这里的所有都是它的。
在你的例子中：
.header_wrapper, .navbar_wrapper, .body_wrapper, .footer_wrapper {
display: table;
/* if we assume font size is 16 px, width will be 768 px */
width: 48em;
margin-left: auto;
margin-right: auto;
}