55

私は最近、フォントのサイズ変更についてかなり読んだことがありますが、そのほとんどは、古いブラウザーでは適切にサイズ変更されないため、px を使用することを許されざる犯罪として嘲笑しています (まあ、それほど悪くはないかもしれません)。

私は本当に自分で使用する標準を持ちたいと思っています。過去には px でした。単純で、理解しやすく、デザインで指定された正確なフォントサイズを達成するのがかなり簡単だからです。 px.

jQueryを使用して作成したテキストのサイズ変更機能が必要だったため、最近プロジェクトでemを使用しました。しかし、em のサイズが指定された 2 つの要素が互いの内部にある場合、em が増幅する方法のために、非常にイライラすることがわかりました (それが理にかなっていることを願っています)。

だから私はフォントのサイズ変更に % を使用することについて疑問に思っていました.いくつかの大きなウェブサイトがこのテクニックを使用しているのを見てきました.

要するに、CSS でのフォント サイズ変更に % を使用することに問題があるかどうか疑問に思っているだけです。フォントのサイズ変更に関しては、PX を使用するよりも優れていますか? また、顕著な欠点はありますか?

質問の前の宣伝文句が多すぎる場合はお詫びします:/ QA の全体にまだ慣れてきたところです。

4

5 に答える 5

22

CSS3 ではrem(root em) を使用します。サイズ変更は、親要素の em サイズの影響を受けません。

:rootルート フォント サイズは、次のように疑似要素のフォント サイズを設定することによって設定されます。

:root {
    font-size: 16px;
}
于 2014-07-06T17:29:09.387 に答える
9

これを使ってみてください

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

したがって、「ラッパー」内で 1em のようなものを言うと、10px に非常に似たサイズになります。ここにテーブルの例があります：

3em == 30px
.5em == 5px
8.5em == 85px

これは移行に役立ちます

Pd: もちろん、本体の後にラッパー タグが必要です

于 2012-04-26T16:06:36.330 に答える
4

私が経験した限りでは、Web デザインの標準は、パーセントを使用して本文のフォント サイズを設定し、その後 ems を使用してフォント サイズを変更することです。body タグの外側でパーセントを使用しても悪影響はありませんが、多くの開発者は em を使用する方が簡単だと思うと思います (誰でも自由に確認できます)。

ems を使用して本文のフォント サイズを設定すると、危険が生じます。古いブラウザでは、特にズーム時に、テキストがチョークして誤って表示されます。

于 2012-04-26T21:43:45.333 に答える
0

FitTextという jQuery プラグインがあります。パーセントに基づいてテキストのサイズを変更します。訪問者がなんらかの理由で JavaScript を無効にしている場合は、通常どおり表示されるため、適切な PX または EM バックアップを設定してください。

これは jQuery に依存するため、それをページに含める必要があります (まだ持っていない場合)。

参照用のjquery.fittext.js：

/*global jQuery */
/*! 
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

    $.fn.fitText = function( kompressor, options ) {

        var settings = {
        'minFontSize' : Number.NEGATIVE_INFINITY,
        'maxFontSize' : Number.POSITIVE_INFINITY
      };

            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor

        if ( options ) { 
          $.extend( settings, options );
        }

        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();

                // Call on resize. Opera debounces their resize by default. 
        $(window).resize(resizer);

            });

    };

})( jQuery );
于 2012-04-26T15:10:24.573 に答える
-1

たぶん、これはフォントサイズ変更スクリプトを作成することの意味をより理解するでしょう。私はあなたが望むことを正確に実行するスクリプトを作成しましたが、それ以上見つけることができません。

擬似コード：

var fontSize = 15; // (em) input
var fontResize = -1;// (em)input
fontSize = fontSize+fontResize; //current div

for(every inherent parent classname == 'classname-em')
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90;

だから言葉で説明した。スクリプトはいくつかのフォントのサイズを変更する必要があります。それが行われると、それらのフォントのサイズも元のフォントより10％少なくなることを除いて、それらのフォントのサイズを変更するためにいくつかの親divも検索します。いくつかの不可解なことで、あなたは正しい変換をするでしょう。また、パディングと境界線の幅は避けてください。

于 2012-04-25T22:33:22.027 に答える