web-dev-qa-db-ja.com

ユーザーの画面解像度に相対的なフォントサイズですか？

流動的なWebサイトがあり、メニューは幅の20％です。メニューのフォントサイズを適切に測定して、常にボックスの幅に合わせ、次の行に折り返さないようにします。私は「em」を単位として使用することを考えていましたが、ブラウザのフォントサイズに比例するため、解像度を変更してもフォントサイズは変わりません。

PTSとパーセンテージも試しました。必要な機能が何もありません...

続行方法のヒントを教えてください。

cssmeasurement
72
barakuda28
@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

画面の画面サイズに応じて手動で指定できます。画面サイズを変えて、フォントサイズを手動で追加してください。

47
Arpit Srivastava

em、%、pxを使用できます。ただし、media-queriesこのリンクを参照 と組み合わせて、メディアクエリについて学習します。また、CSS3には、現在のビューポートサイズに関連してサイズを変更するためのいくつかの新しい値があります：vw、vh、およびvmin。 link を参照してください。

45
Miljan Puzović

これを達成するにはいくつかの方法があります

media queryを使用しますが、いくつかのブレークポイントにフォントサイズが必要です

    body
    {
        font-size: 22px; 
    }
    h1
    {
       font-size:44px;
    }

    @media (min-width: 768)
    {
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
    }

％またはemの次元を使用します。基本フォントサイズを変更するだけで、すべてが変更されます。前のものとは異なり、毎回h1ではなくbodyフォントを変更するか、ベースフォントサイズをデバイスのデフォルトに設定してemですべて休めることができます

  1. 「Ems」（em）：「em」はスケーラブルなユニットです。 emは現在のフォントサイズに等しくなります。たとえば、ドキュメントのフォントサイズが12ptの場合、1emは12ptに等しくなります。 Emは本質的にスケーラブルなので、2emは24pt、.5emは6ptになります。
  2. パーセント（％）：パーセント単位は「em」単位によく似ていますが、いくつかの基本的な違いはありません。何よりもまず、現在のfont-sizeは100％に等しい（つまり、12pt = 100％）。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。

kyleschaeffer.com/.... を参照してください

CSS3は、ビューポートに関連する新しいディメンションをサポートします。しかし、これはAndroidでは動作しません

  1. 3.2vw =ビューポートの幅の3.2％
  2. 3.2vh =ビューポートの高さの3.2％
  3. 3.2vmin = 3.2vwまたは3.2vhの小さい方

  4. 3.2vmax = 3.2vwまたは3.2vhの大きい方

    body
{
    font-size: 3.2vw;
}

css-tricks.com/.... および caniuse.com/.... もご覧ください

21
aWebDeveloper

Nice JSソリューションを開発しました-これは完全にレスポンシブなHTML（つまり、パーセンテージで構築されたHTML）に適しています

  1. フォントサイズの定義には「em」のみを使用します。

  2. htmlフォントサイズは10ピクセルに設定されます。

    html {
  font-size: 100%;
  font-size: 62.5%;
}

  3. ドキュメント対応でフォントサイズ変更関数を呼び出します。

//これにはJQueryが必要です

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}
17
Elad Ziv

このツールを試してみてください： http://fittextjs.com/

私はこの2番目のツールを使用していませんが、似ているようです： https://github.com/zachleat/BigText

5
CoderJK

なぜこれが複雑なのかわかりません。私はこの基本的なjavascriptをします

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

12は、1280の解像度で12pxを意味します。ここで必要な値を決定します

4
user3334188

https://stackoverflow.com/a/17845473/189411 のバリアントを作成しました

ここで、「チェック」サイズにするボックスの最小サイズと最大サイズの関係で、最小テキストサイズと最大テキストサイズを設定できます。さらに、テキストサイズを適用するボックスとは異なるdom要素のサイズを確認できます。

＃size-2要素の幅500pxおよび960pxに基づいて、＃size-2要素で19px〜25pxの範囲でテキストのサイズを変更します。

resizeTextInRange(500,960,19,25,'#size-2');

Body要素の幅500pxおよび960pxに基づいて、＃size-1要素で13px〜20pxの範囲でテキストのサイズを変更します。

resizeTextInRange(500,960,13,20,'#size-1','body');

完全なコードがあります https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});
2
Domenico Monaco

これは私のために働いた：

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

ここで詳細に説明します： https://css-tricks.com/books/volume-i/scale-typography-screen-size/

0
Alex A