100

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

ポイントとパーセンテージも試しました。必要に応じて何も機能しません...

進め方のヒントをください。

4

11 に答える 11

66

em、、%を使用できますpx。ただし、メディアクエリについてmedia-queries は、このリンクを参照してください。また、CSS3には、現在のビューポートサイズに関連するサイズ設定のためのいくつかの新しい値があります： vw、、、。それについてのリンクを参照してください。vhvmin

于 2012-08-02T12:45:58.537 に答える
54 
@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;
  }
}

画面の画面サイズに応じて手動で与えることができます。別の画面サイズを見て、フォントサイズを手動で追加するだけです。

于 2012-08-02T12:48:28.957 に答える
19

完全にレスポンシブな HTML (パーセンテージで構築された HTML) に適した素敵な JS ソリューションを開発しました。

  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+'%');
}
于 2013-07-24T21:54:57.183 に答える
7

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

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

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

于 2015-05-27T07:40:11.347 に答える
5

あなたはこのツールを試すかもしれません：http：//fittextjs.com/

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

于 2012-08-02T12:43:00.090 に答える
4

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

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/

于 2019-03-14T11:40:24.697 に答える
1

これは、このように私にとって最もうまくいきました（.5はフォントサイズの倍率です）

font-size: calc(.5 * (1.5vh + 1.1vw));

画面は通常、高さよりも幅が広いため、1.1:1.5 の比率を使用しました。

この数式を使用すると、使用するズームのレベルに関係なく、フォント サイズがまったく同じであることに気付きました。

于 2021-07-14T17:52:42.913 に答える