3

calc(.333 * (100vw - 12em))HTML の次の行の意味を誰か説明してもらえませんか? 特に .333 値。それはどこから来たのですか？

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

http://ericportis.com/posts/2014/srcset-sizes/から取得

長さはいろいろあります！長さは、絶対 (例: 99px、16em) または相対 (この例のように 33.3vw) にすることができます。この例とは異なり、絶対単位と相対単位の両方を組み合わせたレイアウトがたくさんあることに気付くでしょう。そこで、驚くほどよくサポートされている calc() 関数の出番です。3 列のレイアウトに 12em のサイドバーを追加したとしましょう。次のようにサイズ属性を調整します。

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

私はこれをよく理解しています：

  • (最小幅: 36em) = メディアクエリ
  • calc(.333 * (100vw - 12em)) = レンダリングされた画像サイズ
  • 100vw = デフォルトのレンダリング イメージの長さ
4

3 に答える 3

7

この式を分析してみましょう。

calc(.333 * (100vw - 12em))

calc式として評価することを意味します。

vwは1%ビューの幅であり、ビューの幅でも100vwあり100%ます。

emは大文字の m ( M)12の幅なので、そのうち 12 em の幅、つまり MMMMMMMMMMMM の幅になります。

100vw - 12emしたがって、幅から 12 個の M を引いた値になります。この投稿にビューの幅がある場合、それは次のようになります。

      / from here                                                         to here \

MMMMMM------------------------------------------------------------------------------MMMMMM

.333の約1/3であるため、上記の幅の 3 分の 1 になります。したがって、この幅は次のようになります。

      / from here      to here \                          / or from here  to here \

MMMMMM------------------------------------------------------------------------------MMMMMM

于 2016-01-25T22:47:23.733 に答える
1

これは、(ビューポートの幅の 100 パーセントから 12em を引いた値) のほぼ正確に 3 分の 1 (0.33...) を意味します。

3 列のレイアウトに 12em のサイドバーを追加したとします。サイズ属性を次のように調整します...

したがって、どうやら彼は 3 列のレイアウト (したがって 0.33... 3 分の 1) を持っており、幅 12em の列用のスペースを作りたいと考えています。だから彼は calc() からそれを取ります

あなたが今それを手に入れたことを願っています。

于 2016-01-25T22:42:37.283 に答える