0

ビューポート単位 (vh、vw) の高さとフォント サイズを持つ div を使用して、1 ページのスクロール サイトを構築する予定です。

古いブラウザーでのサポートの問題を認識していますが、vminpolyを使用してページの読み込みを増やすことに興味はありません。

一方、Buggyfillは、より小規模ではありますが、ブラウザ間の互換性のための部分的なソリューションになる可能性があります。

別の解決策として、 css-tricksに記述されているサポートをテストし、後で jQuery を使用して影響を受ける要素のサイズを変更することもできます。

var testEl = $("#vw-test");

testEl.css({
  width: "100vw"
});

if (testEl.width() == window.innerWidth) {
   // do nothing
} else {
   // resize divs with jQuery
};

ビューポート ユニットをサポートするためのアプローチは何ですか?

合理的なブラウザー互換性のための別の簡単な解決策を知っていますか?

4

2 に答える 2

0

ビューポート相対フォント サイズについては、次のプラグインを試してください: https://github.com/draashurx/viewportfontsize/tree/master

シンプルで明確な使用例:

$('p').vw(10); // Equals font-size: 10vw
$('p').vh(5);  // Equals font-size: 5vh

widthただし、このプラグインはサポートまたはheightプロパティをサポートしていません。font-size現時点ではプロパティにのみ適用されます。

于 2016-11-14T07:56:29.567 に答える
-1

これは意見に基づく質問のように思えますが、あなたが何を求めているのか明確ではありません。

内部での使用に関する限りfont-size、ビューポート ユニットを実際に使用する最善かつ唯一の方法は、最小の高さと長さ ( で表される) のメディア クエリの背後にそれらを隠してem、これらのビューポート ユニットから負の倍率が得られないようにすることだと思います。

Web アクセシビリティに関する限り、ビューポート ユニットのおそらく最も有用で適切な使用法は、単純な 1 ページのクレジット カード スタイルの名刺の連絡先情報ページです。(それ以外の場合、長いテキストの記事などで使用する場合は、より多くのテキストを同時に表示できるようにするために特別に大きなモニターを取得した人々のエクスペリエンスを台無しにするリスクがあります。)

css-values viewport-relative-lengths を適切に使用するには?

/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 200% magnification when at 100em */
  html {font-size: 2vmin;}
}
于 2015-05-12T02:18:44.920 に答える