2

新しいvmincssプロパティを使用して、適切なフォントサイズを取得します。絶対に素晴らしい作品です！

div.sample { font-size: 1.5vmin; text-align: center; ... }

この問題は、ページのサイズが変更されたときに発生します。たとえば、ページを小さくしても、font-sizeは変更されず、すべてがキルターになります。

まず、ブラウザはこれを処理することになっていますか？

第二に、それを処理するための最良の方法は何ですか？トリガーを使用してを設定する場合はfont-size、のフォントサイズ値とを知る必要があり、javascript失敗cssする状況が発生するようです。

4

3 に答える 3

2

vminFirefoxで動作しているようです。

テスト用に作成した jsfiddle は次のとおりです: http://jsfiddle.net/noahcollins/Sc8gm/

Chrome で問題が発生しているようですね。Bazzz が指摘したように、Chrome には未解決のバグがあります。カナリアで再現できました。CSS Tricksの記事は、気になる場合は JavaScript を使用して回避するのに役立ちます。

留意すべきもう 1 つの点:現時点でvminは、モバイル ブラウザでの のサポートは非​​常に限られているため、ユーザーが縦向きと横向きを切り替える場合に問題になります。

于 2013-02-22T08:49:35.440 に答える
1

CSS-Tricks で述べられているように、おそらくそれは既知のバグです。また、javascript の回避策もあります。「バグ!」という見出しの下をご覧ください。

http://css-tricks.com/viewport-sized-typography/

CSS-Tricks によって提案された回避策

この問題を修正するには (ページを更新せずにサイズ変更を許可する)、要素を「再描画」する必要があります。私はjQueryを使用し、再描画をトリガーする各要素（この場合は無関係）のz-index値をいじっただけです。

causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
});
于 2013-02-22T08:34:08.327 に答える
0

vmin はモバイル Web デザインの優れたアイデアですが、ブラウザーのサポートは限られています。さらに、存在するブラウザー サポートは、いくつかの奇妙な動作を示します。たとえば、vmin は現在の画面サイズの関数としてフォント サイズを計算するため、テキスト入力要素に注目すると問題が発生します。キーボードオープン。そのため、テキスト入力が自然に小さくなってしまうことがありますが、これは非常に煩わしいことです。したがって、vw を使用して、画面の幅に基づいてテキスト サイズを維持することをお勧めします。これにより、ユーザー エクスペリエンスが向上します。vh には、上で説明したのと同じ問題があります。

于 2013-10-17T03:21:34.640 に答える