0

次のCSS設定があります。

.header_wrapper, .navbar_wrapper, .body_wrapper, .footer_wrapper {
    display: table;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
}

ユーザーが font-resize ボタンをクリックしたときにテキストに合わせて、これらの要素のサイズを段階的に (ブラウザー ウィンドウの 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;
  });
4

1 に答える 1

2

フォントのサイズで要素のサイズを変更するには、要素に でサイズを指定し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;
}
于 2013-02-19T17:19:05.273 に答える