スペース全体を占めるブロックがあり、その中に固定幅のブロックがそのように中央に配置されているとします。

ページ上の要素のネストを最小限に抑える場合、次のソリューションは遅くなりますか?

ベンチマークを作成しようとしましたが、作成したことがないため、おそらくどこかで台無しにしました: http://jsperf.com/css3-calc-test/14

これは、calc バージョンがこれまでになくわずかに高速であることを示しています。

少し複雑な問題があります。単位line-heightの違いとCSSで設定する必要があります。私の考えは、このコードで設定することですvhpxcalc

簡単に聞こえますが、うまくいきません。これらの単位を使用した計算が機能しない理由は、CSS Calc Viewport Units Workaround で説明されています。これは、マージンとパディングをハッキングすることでプロパティに対して解決されheightますが、行の高さのプロパティには使用できません。

問題は Chrome、IE、Edge で解決されていることがわかりますが、Firefox でもこれを行う必要があります。Firefox では、開発者ツールに表示されます

プロパティ値が無効です。

何か案が？（JavaScriptは私にとって解決策ではありません）

CSS の使い方を学んだのでcalc、CSS が役立つ場面がたくさん見つかりました。

ただし、ブラウザやデバイス間でどのように機能するのか疑問に思っています.

気にせず使えるほど広くサポートされているか？

デモ：

次のような状況があります。

コンテキストでは、100%= 1440px、および9.09pxsass を使用した数学で生成されます。

結果は次94.55pxのcalcようになります。94.54px

小数点以下を切り捨てるにはどうすればよいですか?

編集:例.

親内の子に適用する適切なスケールを計算しようとしていますが、CSS 関数calc()内では使用できません。transform: scale私はこの機能を JavaScript で実行しましたが、スクリプトでページが肥大化するのをできるだけ避けるために、純粋な CSS ソリューションに興味があります。

例: CSS

この定義は、無効なプロパティ値を返します。翻訳のような他の用途:

問題なく動作します。CSSのみを使用してdivの正しいスケールを計算するためにcalcを使用できる方法はありますか?

編集：それをよりよく説明するために、計算がそれを行うので、0と1の間の値を見つけることは問題ではありません。パーセンテージを使用すると、無効なプロパティ値が取得されます。

テスト 1 CSS3 変数で試してみましたが、Scale 関数で結果が得られませんでした

クロムの値を受け入れるようですが、スケールを操作しません。

ZOOM CSS プロパティは、chrome thou でのみ正常に動作するようです。これはうまくいきます。

作業例:

Url: MiWeb では、クラスが class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite" の DIV には、スプライトをソースとして使用するため、background-image プロパティがあります。 CSS

現在、元の画像は目に見える div よりも大きくなっています。JS(height:250px aprox)がブロックされているブラウザーとの互換性を高めるために JS の使用を避けたいので、CSS のみを使用して画像をスケーリングしたいと思います。

その背景画像を適切なサイズにスケーリングしたいのですが、正しい値は 250px / 490px ( scale(calc(100% / 490) ) です。CSS は出力前および CMS の他の部分で生成されるため、できません。 CS ルールが生成されるときの親 DIV の実際のサイズがわかります。