cssのvw指定はブラウザスケーリングに対応していない、使わないほうがいいのでしょうか？

要素の幅や高さを決める場合、vwを使うことを推奨するサイトが増えたように思います。私も試してみたのですが、要素がスケーリングされません。

ブラウザのスケーリング機能を使用しました。
ctr+ミドルホイールです。
スマホならそれで問題ないのかもしれませんが、ブラウザだとスケーリングをよく使いますよね(スマホは持っていませんので確認できません)。

画像にobject-fit:cover;とheight:30vwを指定しました。

pcファーストで考えている場合、vwを使用するのは適切なんでしょうか？

行動規範の内容に同意します

回答1件

そうですね、PCブラウザのズームで大きくしたい画像については、vw %などの単位を使うことはできません。
個人的には、「pcファーストで考えている場合、vwを使用するのは適切」だと思いますが、スケーリングした時にレイアウトを維持したいのであれば、全ての要素でpxなどの単位の固定幅を基準とする必要があります。

これは、PCブラウザのズームの仕様によるものです。

PCブラウザはいわゆる「ピンチズーム」に対応していません。

Chrome でも Firefox でもいいので、ズームした後に、コンソール上でwindow.visualViewportを実行してみてください。
ズームしているにもかかわらず、返ってきた結果のscaleは1になっていると思います。

これはどういうことかというと、「ピンチズーム」とPCブラウザのズームの違いによります。

モバイルブラウザの「ピンチズーム」は等倍表示されたレイアウトの一部を覗くようにズームするため、vw ＝「レイアウトに用いるビューポート」は「表示されているビューポート」と必ずしも一致しないです。
一方で、PCブラウザのズームは表示部分に全てを納めようとし、見えている部分＝ビューポートにしようとするので、「レイアウトに用いるビューポート」と「表示されているビューポート」が一致します。
別の言葉を使えば、PCブラウザのズームは「レイアウトに用いるビューポート」を小さくしたものを引き延ばしているとも言えます。

つまり、PCブラウザのズームでは、ビューポートに合わせたレイアウトの場合、レイアウトそのものを拡大するのが難しいです。