回答編集履歴
2
訂正
test
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
maisumakun さんのご回答を見て、補足が必要かな、と感じたので書いておきます。
|
|
35
35
|
|
|
36
|
-
まず、`--vw`は`px`単位の値で、`vw`単位ではないです。
|
|
36
|
+
まず、`calc(var(--vw) / var(--base-vw))`は`px`単位の値で、`vw`単位ではないです。
|
|
37
37
|
|
|
38
38
|
というか、CSS上では`px`単位ですが、意図としては比なので単位のない値です。
|
|
39
39
|
|
1
追記
test
CHANGED
|
@@ -27,3 +27,21 @@
|
|
|
27
27
|
|
|
28
28
|
とはいえ、現実にはクソみたいな上司とかクソみたいなクライアントがアクセシビリティも理解してないくせに「ズームレベルを変えるとレイアウトが崩れるじゃないか！」「フォントサイズの設定が変わるとレイアウトが崩れるじゃないか！」とか言ってくる場合があるので、ズームレベルやフォントサイズの設定を無視するようなデザイン手法には一定の需要がある、ということです。悲しい現実ですね。
|
|
29
29
|
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
### 追記
|
|
33
|
+
|
|
34
|
+
maisumakun さんのご回答を見て、補足が必要かな、と感じたので書いておきます。
|
|
35
|
+
|
|
36
|
+
まず、`--vw`は`px`単位の値で、`vw`単位ではないです。
|
|
37
|
+
|
|
38
|
+
というか、CSS上では`px`単位ですが、意図としては比なので単位のない値です。
|
|
39
|
+
|
|
40
|
+
これはどういうことかというと、あのページのコードでやっていることは`1512:実際の画面幅 = 1:x`を解いています。つまり意図としては「幅1512pxで書かれたデザインカンプで1pxとして表現されているものは、実際の画面幅で縮小すると何pxになるか」を計算しているのです。
|
|
41
|
+
|
|
42
|
+
これをするとどういういいことがあるかというと、デザインカンプで`16px`として指示されているものを「画面幅がこうだから」とかいろいろ考えずに`16rem`と記述することができる、という点です。
|
|
43
|
+
|
|
44
|
+
ここまで読んで、「でもそれなら`calc( 100vw / 1512 )`って書けばJavaScriptいらなくない？」と感じたかもしれません。ここで引っかかってくるのが『`body{width: 100vw}`って書くと横スクロールが発生する問題』です。`100vw`は垂直スクロールバーの幅を含みますので、上記のコードで書くと全体的にデザインカンプから微妙にずれてくるはずです。`document.body.clientWidth`はスクロールバーを含みませんので、この問題を解決します。
|
|
45
|
+
もちろん、`cqw`単位を使えば解決するはずなのですが、これはこれで`body`が固定配置の包含ブロックとなってしまう問題があり、安易に使うことができません。
|
|
46
|
+
|
|
47
|
+
つまり、一言でまとめると「アクセシビリティを犠牲にして、サイズ変更や設定変更に影響されず、デザインカンプからコードを起こす作業を楽にしている書き方」ということなのです。
|