CSS calcの記述について

Question

CSSの記述について質問です。

widthやフォントサイズを指定する際に、スマートフォンにも対応できるようcalcの計算式を使用することがあると思います。
制作会社から納品されたソースで、以下のような記述がありました。

html {
min-width: 320px;
font-size: calc(24vw /** (750 / 100)**);
line-height: calc(30em / 24);
}

これ以外にも、widthやmarginの指定で（750 / 100）を多用しています。
（例）
width: calc(618vw / (750 / 100));
margin: calc(42vw / (750 / 100)) auto;

この（750 / 100）という値はなんでしょうか？
基礎的なことで申し訳ございません。ご教授お願いいたします。

Answer 1

おそらく、デバイスの物理ピクセル値の基準を750pxに合わせている、ということかと。
そして、画面横幅が750pxの時に、フォントサイズが24pxになるよう比率を合わせている、ということかと。
サイトのデザインデータは、横幅750pxで作成されているのではないでしょうか？
そして、サイトデザインデータのフォントのサイズは、24pxになっているのではないでしょうか？

物理ピクセルとは、解像度（ここでは、dpiのこと）が高い、レティナ以上のディスプレイにおいての、物理的な実ピクセル数になります。
対して、スクリーン上で、JavaScriptなどで取得できる、ないし認識されるピクセル数は、論理ピクセルとなります。
物理ピクセルが750pxのデバイスは、論理ピクセルだいたいは半分の375pxです。
（デバイスの解像度にもよる）
つまり、Webサイトのデータ上は、論理的に375pxとして扱っているけど、実際（物理的）には、750pxのpxを詰め込んで表示させてるから、
375pxのまんまで表示するより綺麗に詳細な画面になるよ、ってことです。
お肌のきめ細かさと一緒です。
同じ面積に対して、粒が細かい方が綺麗に見えるってのをやってます。

ちなみに、なぜ750pxかというと、おそらく、iPhone 7〜を基準にしているからかと。
高解像度ディスプレイのデバイスの中では、一番普及率が高い論理ピクセル値だからだと思います。
つまり、デザインデータとピクセル数値を合わせてやりやすくするための計算ってわけですね。

Comments

[miyabi_pudding]

ちなみに、asuchi0819さんの回答のとおり、あくまで"おそらく"なので、こうだからだよ！って確証があることは言えません。

[chiffon0726]

返信が遅くなり申し訳ありません。ご回答いただきありがとうございます。
おっしゃる通りサイトの横幅が750px、フォントサイズが24pxで作られています。その比率ということですね。ありがとうございました。

Answer 2

ここに聞いても「これだー！」と答えられる人はいません

デザイン上の都合か共同作業故の記述という予測しかできません。

まぁ、少なくとも自分はこう言った書き方は好まないので
コメントで「こういう計算式でこういうのをかけてまーす」というのを書きますね

ただ会社によって決めているところもあるそうなので（友人より）質問者さんの会社の記述法に沿った方が無難でしょうし、余計な争いも起きないと思います。

Comments

[chiffon0726]

返信が遅くなり申し訳ありません。ご回答ありがとうございました。
エンジニア側のメモみたいなもの、という感じでしょうか。
比率を記載してあるというくらいのものだったようですね。ありがとうございました。

Answer 3

スマホデザインの主流が横幅750pxとなっています。
100vw=750pxに対応します。
参考サイト：https://fastcoding.jp/blog/all/webdesign/designswidth-2018/

Comments

[chiffon0726]

返信が遅くなり申し訳ありません。ご回答ありがとうございました。
ご提示いただいたサイトを参考にさせていただきます。